Remove striped tables in UI#36509
Conversation
There was a problem hiding this comment.
Pull request overview
This PR removes the outdated "striped" table design from the UI by eliminating the striped class from all table elements and removing associated CSS rules. The PR also fixes a CSS specificity issue where table cells were rendering with incorrect padding due to :not(.striped) selectors.
Changes:
- Removed all
stripedclass references from 16 template files - Removed CSS rules for striped table styling in
web_src/css/modules/table.cssandweb_src/css/repo.css - Removed CSS specificity workaround rules (
:not(.striped)selectors) to fix table cell padding issues
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| web_src/css/repo.css | Removed repository-specific striped table background color rule for commits table |
| web_src/css/modules/table.css | Removed striped table styling rules and CSS specificity workaround rules with :not(.striped) selectors |
| templates/shared/actions/runner_list.tmpl | Removed striped class from runner list table |
| templates/shared/actions/runner_edit.tmpl | Removed striped class from runner task list table |
| templates/repo/commits_list.tmpl | Removed striped class from commits table |
| templates/repo/branch/list.tmpl | Removed striped class from both default branch and branches list tables |
| templates/package/shared/cleanup_rules/preview.tmpl | Removed striped class from cleanup rules preview table |
| templates/admin/user/list.tmpl | Removed striped class from user list table |
| templates/admin/stats.tmpl | Removed striped class from statistics table |
| templates/admin/repo/list.tmpl | Removed striped class from repository list table |
| templates/admin/queue_manage.tmpl | Removed striped class from queue management table |
| templates/admin/queue.tmpl | Removed striped class from queues table |
| templates/admin/packages/list.tmpl | Removed striped class from packages list table |
| templates/admin/org/list.tmpl | Removed striped class from organization list table |
| templates/admin/notice.tmpl | Removed striped class from system notice list table |
| templates/admin/emails/list.tmpl | Removed striped class from emails list table |
| templates/admin/cron.tmpl | Removed striped class from cron tasks table |
| templates/admin/auth/list.tmpl | Removed striped class from authentication sources table |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Why? I think when the table is relatively large, displaying it this way helps avoid misreading rows. Or, it may be necessary to add a feature that highlights the currently focused row. |
|
It's a stylistic choice only. I find striped tables ugly and GitHub also does not use such a design. We removed the same strips from the commits list a long time ago. |
delvh
left a comment
There was a problem hiding this comment.
I'm fine either way, as long as we are consistent.
There is a benefit to have a barely noticeable difference between alternating rows as they help you identify the correct row.
However, not having it is also fine.
* origin/main: (34 commits) Fine tune diff highlighting (go-gitea#36592) Add code editor setting dropdowns (go-gitea#36534) Update to go 1.26.0 and golangci-lint 2.9.0 (go-gitea#36588) Improve diff highlighting (go-gitea#36583) Fix markup code block layout (go-gitea#36578) Remove striped tables in UI (go-gitea#36509) Fix vertical alignment of `.commit-sign-badge` children (go-gitea#36570) Fix mirror sync parser and fix mirror messages (go-gitea#36504) Update JS and PY deps (go-gitea#36576) Add viewer controller for mermaid (zoom, drag) (go-gitea#36557) Misc typescript tweaks (go-gitea#36523) Use full-file highlighting for diff sections (go-gitea#36561) fix(diff): reprocess htmx content after loading more files (go-gitea#36568) [skip ci] Updated translations via Crowdin Add wrap to runner label list (go-gitea#36565) fix: add dnf5 command for Fedora in RPM package instructions (go-gitea#36527) Enable pagination on GiteaDownloader.getIssueReactions() (go-gitea#36549) Refactor merge conan and container auth preserve actions taskID (go-gitea#36560) Fix assignee sidebar links and empty placeholder after go-gitea#32465 refactor (go-gitea#36559) Fix various version parsing problems (go-gitea#36553) ...
* origin/main: (152 commits) Fine tune diff highlighting (go-gitea#36592) Add code editor setting dropdowns (go-gitea#36534) Update to go 1.26.0 and golangci-lint 2.9.0 (go-gitea#36588) Improve diff highlighting (go-gitea#36583) Fix markup code block layout (go-gitea#36578) Remove striped tables in UI (go-gitea#36509) Fix vertical alignment of `.commit-sign-badge` children (go-gitea#36570) Fix mirror sync parser and fix mirror messages (go-gitea#36504) Update JS and PY deps (go-gitea#36576) Add viewer controller for mermaid (zoom, drag) (go-gitea#36557) Misc typescript tweaks (go-gitea#36523) Use full-file highlighting for diff sections (go-gitea#36561) fix(diff): reprocess htmx content after loading more files (go-gitea#36568) [skip ci] Updated translations via Crowdin Add wrap to runner label list (go-gitea#36565) fix: add dnf5 command for Fedora in RPM package instructions (go-gitea#36527) Enable pagination on GiteaDownloader.getIssueReactions() (go-gitea#36549) Refactor merge conan and container auth preserve actions taskID (go-gitea#36560) Fix assignee sidebar links and empty placeholder after go-gitea#32465 refactor (go-gitea#36559) Fix various version parsing problems (go-gitea#36553) ...
* origin/main: (2555 commits) automate updating nix flakes (go-gitea#35641) Update AGENTS.md instructions (go-gitea#36627) use user id in noreply emails (go-gitea#36550) feat(db): Improve BuildCaseInsensitiveLike with lowercase (go-gitea#36598) [skip ci] Updated translations via Crowdin BUG: Fix workflow run jobs API returning null steps (go-gitea#36603) Refactor highlight and diff (go-gitea#36599) Fix bug when do LFS GC (go-gitea#36500) feature to be able to filter project boards by milestones (go-gitea#36321) Update emoji data for Unicode 16 (go-gitea#36596) Adapt monaco error matching pattern to recent webpack config change (go-gitea#36533) Fix a bug user could change another user's primary email (go-gitea#36586) fix(repo-editor): disable Monaco `editContext` to avoid bugs with lost focus (go-gitea#36585) Fine tune diff highlighting (go-gitea#36592) Add code editor setting dropdowns (go-gitea#36534) Update to go 1.26.0 and golangci-lint 2.9.0 (go-gitea#36588) Improve diff highlighting (go-gitea#36583) Fix markup code block layout (go-gitea#36578) Remove striped tables in UI (go-gitea#36509) Fix vertical alignment of `.commit-sign-badge` children (go-gitea#36570) ... # Conflicts: # custom/conf/app.example.ini # docs/content/administration/config-cheat-sheet.en-us.md # docs/content/administration/config-cheat-sheet.zh-cn.md # modules/setting/security.go # routers/common/errpage.go # services/context/api.go # services/context/context.go
We've been cutting down on the "striped" tables (where rows are using alternate row background colors). This completely removes them as I think such a design looks outdated. The removal of selectors starting with `.ui[class*="very basic"].table:not(.striped)` is needed because of a specificity issue in the CSS where table cells would otherwise render with incorrect padding. Example of one affected table: <img width="1027" height="224" alt="image" src="https://github.com/user-attachments/assets/2f3006ca-99a1-4655-afdb-b7cd9e5f19c7" />
We've been cutting down on the "striped" tables (where rows are using alternate row background colors). This completely removes them as I think such a design looks outdated.
The removal of selectors starting with
.ui[class*="very basic"].table:not(.striped)is needed because of a specificity issue in the CSS where table cells would otherwise render with incorrect padding.Example of one affected table: