style: misc UI fixes by silverwind · Pull Request #37691 · go-gitea/gitea

silverwind · 2026-05-13T15:01:37Z

Action view sidebar: rename job-brief-item to action-view-sidebar-item, fix trash icon overflow on long artifact names, align artifact and workflow hover styles with the jobs list
Branches: expand new PR button cell to three wide so the button is not clipped on narrow viewports
Dashboard feed: add tw-max-w-full so long issue titles truncate
Reactions: tighten label padding

This PR was written with the help of Claude Opus 4.7

- action view: rename job-brief-item to action-view-sidebar-item, fix trash icon overflow on long artifact names, align artifact and workflow hover styles with the jobs list - labels: add with-labels-list-block modifier, apply to issue sidebar and issue ref popup so wrapped labels start at the same x coordinate - branches: expand new PR button cell to three wide so the button is not clipped on narrow viewports - diff stats: add semibold to stats text - dashboard feed: add tw-max-w-full so long issue titles truncate - reactions: tighten label padding Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

Remove `display: contents` and the `with-labels-list-inline` and `with-labels-list-block` modifier classes. The `.labels-list` class is now self-contained: `inline-flex` with `flex-wrap: wrap` and a 4px `gap`. In issue list titles and "added/removed labels" timeline events labels should flow inline with surrounding text. Override the labels-list to `display: inline` in those contexts and provide spacing via margins so wrapped lines get equal horizontal + vertical 4px gap and labels stay vertically centered with the title text. Strip template whitespace between adjacent labels in shared/issuelist.tmpl so the rendered HTML matches the 4px gap intended by the margin. Remove the underline that appeared on label hover from the global `a:hover` rule. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

silverwind · 2026-05-14T01:20:11Z

Labels restyling done, they wrap better now and no display: contents.

wxiaoguang · 2026-05-14T01:37:16Z

Align or not?

Signed-off-by: silverwind <me@silverwind.io>

silverwind · 2026-05-14T01:41:02Z

Align or not?

I refrained from touching this cursed timeline, but I see I must.

wxiaoguang · 2026-05-14T01:44:14Z

I refrained from touching this cursed timeline, but I guess if we really must I can try.

I don't think it is a must. I am just curious about why sometimes you can tolerate the misalignement but sometimes you don't. Although the original display: contents + parent flex does align.

wxiaoguang · 2026-05-14T01:44:58Z

I refrained from touching this cursed timeline, but I guess if we really must I can try.

By the way, not only "timeline"

silverwind · 2026-05-14T01:55:08Z

I don't tolerate it, it just didn't show in my tests.

wxiaoguang · 2026-05-14T02:00:39Z

I don't tolerate it, it just didn't show in my tests.

It does appear

Use `margin-right` on every label instead of `margin-left` on the `+ a` selector. With `margin-left`, a wrapped label is still a subsequent DOM sibling so it inherited a 4px indent on the new line. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

silverwind · 2026-05-14T02:03:18Z

fixed in e34322d

silverwind · 2026-05-14T02:08:33Z

Now checking minimal fixes for the timeline, spacing and wrapping.

silverwind · 2026-05-14T02:12:44Z

Timeline fixed in a6d8c9b.

`.comment-text-line` carries an intentionally large `line-height: 32px` for unrelated alignment concerns, but it stretched wrapped label rows in "added/removed labels" events to a 13px gap. Override the line-height only when the line contains a `.labels-list`, and drop the label margin-block there so the line-height (not margins) controls the wrap spacing. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

- Split the duplicate `.timeline-item.event .labels-list > a` rule into two distinct rules (issue list and timeline) so margin behaviour no longer relies on a `margin-block: 0` override that came later in source order. - Move the `:has(.labels-list)` line-height override out of label.css and into repo.css next to the `comment-text-line` 32px rule it tightens. - Move the `#issue-list .item-title { display: block }` override from label.css to issue-list.css alongside the other #issue-list overrides. - Drop the verbose block comment. No visual change: issue list still 4px H/V, timeline still ~5px V wrap gap. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

`.action-view-sidebar-item` redeclared display/align-items/gap that the existing `.flex-items-block > .item` rule (base.css:885-894) already provides to the three `<li>` use sites. The standalone summary `<a>` (no flex-items-block ancestor) composes `flex-text-block` for the same flex layout. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

Add `.interact-list` and `.interact-list-item` to helpers.css alongside the existing `.interact-fg`/`.interact-bg` family. The pair carries everything needed for a vertical list of clickable rows with hover and selected state, so consumers don't have to also include `ui relaxed list` and `flex-items-block` to get the layout. Use them in `RepoActionView.vue` to replace the previous `ui relaxed list flex-items-block tw-p-0` + `item action-view-sidebar-item` combo on the three sidebar lists and the summary link. No Fomantic rules cascade onto the new classes; rendering is pixel-identical. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

silverwind · 2026-05-14T02:55:39Z

25e1d45 adds .interact-list and .interact-list-item for a general class that does the styling of the actions view sidebar. It can be used in more places in the future. Rendering is confirmed pixel-identical and all the formantic baggage is gone.

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

wxiaoguang

we already have "flex-relaxed-list" to replace "ui relaxed list"
all items should use the same class "item"
items with customization should use the design like "items-with-main"

silverwind · 2026-05-14T03:13:38Z

we already have "flex-relaxed-list" to replace "ui relaxed list"

all items should use the same class "item"

items with customization should use the design like "items-with-main"

But this is a unique kind of list seen nowhere else. I don't think mixing with flex classes is good, it would not make the list self-sufficient and encourage mixing classes which makes it hard to reason about.

I'd rather have a single .interact-list than .interact-list.flex-relaxed-list. Combining two classes makes it hard to reason about, it's over-engineering imho.

Add a global `:focus-visible` outline (primary color) for `a`, `button` and `[role="button"]`, replacing the button-only `box-shadow` focus ring so all interactive elements get a consistent keyboard focus indicator. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

…up marker - Use the standard `btn interact-bg` icon-button style for the log options gear instead of a `ui button`. - Animate the step summary chevron with a CSS rotation instead of swapping the icon between chevron-right and chevron-down. - Render the log group fold indicator with the native disclosure marker inside the content column (after the line numbers) like GitHub. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

The job link used `display: contents` which dropped it from the tab order; give it a flex box so it is keyboard-focusable. Hide the per-job re-run button until the row is hovered or focused, swapping it with the duration only when the button is present. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

silverwind · 2026-05-21T02:07:36Z

Tweaks pushed:

interact-bg on cog icon
chevron rotate effect
log-group marker inline
re-run button only shows on hover/focus
make job links focusable
tweak global focus-visible ring style

Signed-off-by: silverwind <me@silverwind.io>

Copilot

Pull request overview

This PR makes a set of UI/CSS and template tweaks to improve layout/overflow behavior across the Actions run view sidebar, branch list, dashboard feeds, issue list titles, labels rendering/wrapping, and reaction badges. It also refactors label rendering to always produce a <span> label and moves link behavior to surrounding templates/builders.

Changes:

Actions UI: restyle the run sidebar lists (jobs/artifacts/details) and improve hover behavior (e.g. rerun button swap-in).
Issue/label UI: update issue list title markup/class, rework labels markup/CSS to avoid display: contents, and adjust related integration tests.
General UI polish: branch list “new PR” button clipping fix, dashboard feed title truncation fix, reaction spacing tweaks, and focus ring styling changes.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
web_src/js/components/RepoActionView.vue	Restructures Actions run sidebar markup and hover behavior for jobs/artifacts/details.
web_src/js/components/ActionRunJobView.vue	Adjusts job view controls and log group disclosure UI behavior/styling.
web_src/css/shared/flex-list.css	Removes outdated comment related to previous labels layout behavior.
web_src/css/repo/reactions.css	Tightens reaction pill padding and adjusts left margin.
web_src/css/repo/issue-list.css	Adds styling for new `.issue-item-title` link in issue list.
web_src/css/repo.css	Adjusts `.comment-text-line` layout rules (flex behavior) in issue timelines.
web_src/css/modules/label.css	Reworks `.labels-list` layout to avoid `display: contents`, updates wrapping/alignment behavior.
web_src/css/modules/button.css	Removes `.ui.button:focus-visible` styling (now relying on global focus styling).
web_src/css/base.css	Adds global focus-visible outline styling for anchors/buttons/`[role="button"]`.
tests/integration/issue_test.go	Updates selector to `.issue-item-title` to match new issue list markup.
templates/user/dashboard/feeds.tmpl	Adds `tw-max-w-full` to ensure truncation works for long titles.
templates/shared/issuelist.tmpl	Updates issue title class/structure and label anchors; minor inline alignment wrapper added.
templates/repo/issue/view_content/comments.tmpl	Removes `with-labels-list-inline` class in label timeline event.
templates/repo/issue/card.tmpl	Updates label rendering to wrap labels in an `<a class="item">` around `RenderLabel`.
templates/repo/branch/list.tmpl	Adjusts action button cell layout and expands PR button cell width/markup to prevent clipping.
modules/templates/util_render.go	Removes `RenderLabelWithLink`, makes `RenderLabel` always return `<span>`, updates `RenderLabels` builder output accordingly.
modules/templates/util_render_test.go	Updates tests to reflect new label rendering output.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Cover ".ui.button" so focusable div-based buttons (e.g. dropdown buttons that are neither <button> nor <a>) keep a keyboard focus ring. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

bircni

Thanks!

* origin/main: style: misc UI fixes (go-gitea#37691) ci: shard tests and reduce redundant work (go-gitea#37618) chore: simplify issue and pull request templates (go-gitea#37799) # Conflicts: # web_src/js/components/ActionRunJobView.vue

* main: (70 commits) fix(api): handle partial failures in push mirror synchronization gracefully (go-gitea#37782) fix(deps): update module golang.org/x/crypto to v0.52.0 [security] (go-gitea#37806) fix(build): swagger css import (go-gitea#37801) feat: add copy button to action step header, improve other copy buttons (go-gitea#37744) style: misc UI fixes (go-gitea#37691) ci: shard tests and reduce redundant work (go-gitea#37618) chore: simplify issue and pull request templates (go-gitea#37799) chore: Update 1.26.2 changelog in main (go-gitea#37796) fix(actions): make artifact signature payloads unambiguous (go-gitea#37707) chore: Update giteabot to fix failure when backport (go-gitea#37789) fix(deps): update module github.com/go-git/go-git/v5 to v5.19.1 [security] (go-gitea#37786) fix(pull): handle empty pull request files view to allow reviews (go-gitea#37783) fix(markup): make RenderString never fail (go-gitea#37779) fix(markup): wrap indented code blocks for the code-copy button (go-gitea#37748) fix(permissions): Fix reading permission (go-gitea#37769) fix: add natural sort to sortTreeViewNodes (go-gitea#37772) fix: package creation unique conflict (go-gitea#37774) fix(deps): update npm dependencies (go-gitea#37768) fix(deps): update module gitlab.com/gitlab-org/api/client-go/v2 to v2.26.0 (go-gitea#37771) ci: split giteabot workflow (go-gitea#37770) ...

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label May 13, 2026

wxiaoguang reviewed May 13, 2026

View reviewed changes

Comment thread web_src/css/modules/label.css Outdated

wxiaoguang reviewed May 14, 2026

View reviewed changes

Comment thread templates/repo/diff/stats.tmpl Outdated

silverwind commented May 14, 2026

View reviewed changes

Comment thread templates/repo/diff/stats.tmpl Outdated

Apply suggestion from @silverwind

8cc1c4e

Signed-off-by: silverwind <me@silverwind.io>

silverwind and others added 4 commits May 14, 2026 04:12

silverwind changed the title ~~style: misc UI fixes~~ style: misc UI fixes, add .interact-list May 14, 2026

silverwind and others added 2 commits May 14, 2026 04:58

style: reformat interact-list rules

3a7743a

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

Merge branch 'main' into misc-ui-fixes

ac609b9

wxiaoguang previously requested changes May 14, 2026

View reviewed changes

GiteaBot added lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels May 14, 2026

silverwind and others added 4 commits May 21, 2026 04:04

style: use 2px focus-visible ring

0c1b3f5

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

silverwind requested a review from Copilot May 21, 2026 02:07

Copilot started reviewing on behalf of silverwind May 21, 2026 02:08 View session

silverwind commented May 21, 2026

View reviewed changes

Comment thread web_src/js/components/ActionRunJobView.vue Outdated

Apply suggestion from @silverwind

f0144eb

Signed-off-by: silverwind <me@silverwind.io>

silverwind commented May 21, 2026

View reviewed changes

Comment thread web_src/js/components/RepoActionView.vue Outdated

Apply suggestion from @silverwind

280350b

Signed-off-by: silverwind <me@silverwind.io>

Copilot AI reviewed May 21, 2026

View reviewed changes

Comment thread web_src/css/modules/button.css

Comment thread templates/shared/issuelist.tmpl Outdated

silverwind and others added 2 commits May 21, 2026 04:34

fix: include ui buttons in the focus-visible ring

df6ae05

Cover ".ui.button" so focusable div-based buttons (e.g. dropdown buttons that are neither <button> nor <a>) keep a keyboard focus ring. Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

style: fix typo in issuelist comment

0e1dea1

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>

silverwind requested a review from bircni May 21, 2026 05:24

bircni approved these changes May 21, 2026

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels May 21, 2026

wxiaoguang approved these changes May 21, 2026

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels May 21, 2026

Merge branch 'main' into misc-ui-fixes

6e21a42

silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label May 21, 2026

silverwind enabled auto-merge (squash) May 21, 2026 06:59

silverwind merged commit 2e96e82 into go-gitea:main May 21, 2026
24 checks passed

silverwind deleted the misc-ui-fixes branch May 21, 2026 07:02

GiteaBot added this to the 1.27.0 milestone May 21, 2026

GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label May 21, 2026

Uh oh!

Conversation

silverwind commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

silverwind commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented May 14, 2026

Uh oh!

Uh oh!

silverwind commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented May 14, 2026

Uh oh!

wxiaoguang commented May 14, 2026

Uh oh!

silverwind commented May 14, 2026

Uh oh!

wxiaoguang commented May 14, 2026

Uh oh!

silverwind commented May 14, 2026

Uh oh!

silverwind commented May 14, 2026

Uh oh!

silverwind commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

silverwind commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented May 21, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

bircni left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

silverwind commented May 13, 2026 •

edited

Loading

silverwind commented May 14, 2026 •

edited

Loading

silverwind commented May 14, 2026 •

edited

Loading

silverwind commented May 14, 2026 •

edited

Loading

silverwind commented May 14, 2026 •

edited

Loading

wxiaoguang left a comment •

edited

Loading

silverwind commented May 14, 2026 •

edited

Loading