style: misc UI fixes (#37691)

- 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

<img width="261" height="65" alt="Screenshot 2026-05-13 at 16 18 33"
src="https://github.com/user-attachments/assets/ecfe8f37-4a65-4839-b8c0-defccc85482c"
/>
<img width="154" height="126" alt="Screenshot 2026-05-13 at 16 19 25"
src="https://github.com/user-attachments/assets/41302134-d1b7-401a-be2d-79173adb6d17"
/>
<img width="405" height="378" alt="Screenshot 2026-05-13 at 16 47 18"
src="https://github.com/user-attachments/assets/e2c5cdd4-f11d-498c-b17e-c74c80c0ddf7"
/>
<img width="206" height="149" alt="Screenshot 2026-05-13 at 16 55 53"
src="https://github.com/user-attachments/assets/7787125d-04b1-4500-b9b8-2637845509d6"
/>
<img width="858" height="135" alt="Screenshot 2026-05-13 at 16 58 41"
src="https://github.com/user-attachments/assets/cb5bdf56-3891-469d-aa77-ea38855958c1"
/>
<img width="434" height="128" alt="Screenshot 2026-05-13 at 17 00 43"
src="https://github.com/user-attachments/assets/60f2c34d-b345-4813-8f6d-a95bf51021b4"
/>



---
This PR was written with the help of Claude Opus 4.7

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

modules/templates/util_render.go

@@ -121,23 +121,7 @@ func (ut *RenderUtils) RenderIssueSimpleTitle(text string) template.HTML {
 	return ret
 }
 
-func (ut *RenderUtils) RenderLabelWithLink(label *issues_model.Label, link any) template.HTML {
-	var attrHref template.HTML
-	switch link.(type) {
-	case template.URL, string:
-		attrHref = htmlutil.HTMLFormat(`href="%s"`, link)
-	default:
-		panic(fmt.Sprintf("unexpected type %T for link", link))
-	}
-	return ut.renderLabelWithTag(label, "a", attrHref)
-}
-
 func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML {
-	return ut.renderLabelWithTag(label, "span", "")
-}
-
-// RenderLabel renders a label
-func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, tagAttrs template.HTML) template.HTML {
 	locale := ut.ctx.Value(translation.ContextKey).(translation.Locale)
 	var extraCSSClasses string
 	textColor := util.ContrastColor(label.Color)
@@ -151,8 +135,8 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
 
 	if labelScope == "" {
 		// Regular label
-		return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></%s>`,
+		return htmlutil.HTMLFormat(`<span class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></span>`,
-			tagName, tagAttrs, extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name), tagName)
+			extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name))
 	}
 
 	// Scoped label
@@ -187,29 +171,25 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
 
 	if label.ExclusiveOrder > 0 {
 		// <scope> | <label> | <order>
-		return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
+		return htmlutil.HTMLFormat(`<span class="ui label %s scope-parent" data-tooltip-content title="%s">`+
 			`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
 			`<div class="ui label scope-middle" style="color: %s !important; background-color: %s !important">%s</div>`+
 			`<div class="ui label scope-right">%d</div>`+
-			`</%s>`,
+			`</span>`,
-			tagName, tagAttrs,
 			extraCSSClasses, descriptionText,
 			textColor, scopeColor, scopeHTML,
 			textColor, itemColor, itemHTML,
-			label.ExclusiveOrder,
+			label.ExclusiveOrder)
-			tagName)
 	}
 
 	// <scope> | <label>
-	return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
+	return htmlutil.HTMLFormat(`<span class="ui label %s scope-parent" data-tooltip-content title="%s">`+
 		`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
 		`<div class="ui label scope-right" style="color: %s !important; background-color: %s !important">%s</div>`+
-		`</%s>`,
+		`</span>`,
-		tagName, tagAttrs,
 		extraCSSClasses, descriptionText,
 		textColor, scopeColor, scopeHTML,
-		textColor, itemColor, itemHTML,
+		textColor, itemColor, itemHTML)
-		tagName)
 }
 
 // RenderEmoji renders html text with emoji post processors
@@ -246,18 +226,19 @@ func (ut *RenderUtils) MarkdownToHtml(input string) template.HTML { //nolint:rev
 func (ut *RenderUtils) RenderLabels(labels []*issues_model.Label, repoLink string, issue *issues_model.Issue) template.HTML {
 	isPullRequest := issue != nil && issue.IsPull
 	baseLink := fmt.Sprintf("%s/%s", repoLink, util.Iif(isPullRequest, "pulls", "issues"))
-	var htmlCode strings.Builder
+	var htmlCode htmlutil.HTMLBuilder
-	htmlCode.WriteString(`<span class="labels-list">`)
+	htmlCode.WriteHTML(`<span class="labels-list">`)
 	for _, label := range labels {
 		// Protect against nil value in labels - shouldn't happen but would cause a panic if so
 		if label == nil {
 			continue
 		}
-		link := fmt.Sprintf("%s?labels=%d", baseLink, label.ID)
+		htmlCode.WriteFormat(`<a class="item" href="%s?labels=%d">`, baseLink, label.ID)
-		htmlCode.WriteString(string(ut.RenderLabelWithLink(label, template.URL(link))))
+		htmlCode.WriteHTML(ut.RenderLabel(label))
+		htmlCode.WriteHTML("</a>")
 	}
-	htmlCode.WriteString("</span>")
+	htmlCode.WriteHTML("</span>")
-	return template.HTML(htmlCode.String())
+	return htmlCode.HTMLString()
 }
 
 func (ut *RenderUtils) RenderThemeItem(info *webtheme.ThemeMetaInfo, iconSize int) template.HTML {

modules/templates/util_render_test.go

@@ -206,16 +206,15 @@ func TestRenderLabels(t *testing.T) {
 	expected = `/owner/repo/pulls?labels=123`
 	assert.Contains(t, ut.RenderLabels([]*issues.Label{label}, "/owner/repo", issue), expected)
 
-	expectedLabel := `<a href="&lt;&gt;" class="ui label " style="color: #fff !important; background-color: label-color !important;" data-tooltip-content title=""><span class="gt-ellipsis">label-name</span></a>`
+	expectedLabel := `<span class="ui label " style="color: #fff !important; background-color: label-color !important;" data-tooltip-content title=""><span class="gt-ellipsis">label-name</span></span>`
-	assert.Equal(t, expectedLabel, string(ut.RenderLabelWithLink(label, "<>")))
+	assert.Equal(t, expectedLabel, string(ut.RenderLabel(label)))
-	assert.Equal(t, expectedLabel, string(ut.RenderLabelWithLink(label, template.URL("<>"))))
 
 	label = &issues.Label{ID: 123, Name: "</>", Exclusive: true}
-	expectedLabel = `<a href="" class="ui label  scope-parent" data-tooltip-content title=""><div class="ui label scope-left" style="color: #fff !important; background-color: #000000 !important">&lt;</div><div class="ui label scope-right" style="color: #fff !important; background-color: #000000 !important">&gt;</div></a>`
+	expectedLabel = `<span class="ui label  scope-parent" data-tooltip-content title=""><div class="ui label scope-left" style="color: #fff !important; background-color: #000000 !important">&lt;</div><div class="ui label scope-right" style="color: #fff !important; background-color: #000000 !important">&gt;</div></span>`
-	assert.Equal(t, expectedLabel, string(ut.RenderLabelWithLink(label, "")))
+	assert.Equal(t, expectedLabel, string(ut.RenderLabel(label)))
 	label = &issues.Label{ID: 123, Name: "</>", Exclusive: true, ExclusiveOrder: 1}
-	expectedLabel = `<a href="" class="ui label  scope-parent" data-tooltip-content title=""><div class="ui label scope-left" style="color: #fff !important; background-color: #000000 !important">&lt;</div><div class="ui label scope-middle" style="color: #fff !important; background-color: #000000 !important">&gt;</div><div class="ui label scope-right">1</div></a>`
+	expectedLabel = `<span class="ui label  scope-parent" data-tooltip-content title=""><div class="ui label scope-left" style="color: #fff !important; background-color: #000000 !important">&lt;</div><div class="ui label scope-middle" style="color: #fff !important; background-color: #000000 !important">&gt;</div><div class="ui label scope-right">1</div></span>`
-	assert.Equal(t, expectedLabel, string(ut.RenderLabelWithLink(label, "")))
+	assert.Equal(t, expectedLabel, string(ut.RenderLabel(label)))
 }
 
 func TestUserMention(t *testing.T) {

templates/repo/branch/list.tmpl

@@ -29,8 +29,8 @@
 								</div>
 								<p class="info tw-flex tw-items-center tw-my-1">{{svg "octicon-git-commit" 16 "tw-mr-1"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.DBBranch.CommitID}}">{{ShortSha .DefaultBranchBranch.DBBranch.CommitID}}</a> · <span class="commit-message">{{ctx.RenderUtils.RenderCommitMessage .DefaultBranchBranch.DBBranch.CommitMessage .Repository}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .DefaultBranchBranch.DBBranch.CommitTime}}{{if .DefaultBranchBranch.DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DefaultBranchBranch.DBBranch.Pusher}}{{template "shared/user/namelink" .DefaultBranchBranch.DBBranch.Pusher}}{{end}}</p>
 							</td>
-							{{/* FIXME: here and below, the tw-overflow-visible is not quite right but it is still needed the moment: to show the important buttons when the width is narrow */}}
+							<td>
-							<td class="tw-text-right tw-overflow-visible">
+								<div class="tw-flex tw-flex-wrap tw-justify-end">
 								{{if and $.IsWriter $.Repository.CanContentChange (not .IsDeleted)}}
 									<button class="btn interact-bg show-create-branch-modal tw-p-2"
 										data-modal="#create-branch-modal"
@@ -63,6 +63,7 @@
 										{{svg "octicon-pencil"}}
 									</button>
 								{{end}}
+								</div>
 							</td>
 						</tr>
 					</tbody>
@@ -71,9 +72,7 @@
 		{{end}}
 
 		<h4 class="ui top attached header">
-			<div class="flex-text-block">
+			{{ctx.Locale.Tr "repo.branches"}}
-				{{ctx.Locale.Tr "repo.branches"}}
-			</div>
 		</h4>
 
 		<div class="ui attached segment">
@@ -106,7 +105,7 @@
 								<p class="info tw-flex tw-items-center tw-my-1">{{svg "octicon-git-commit" 16 "tw-mr-1"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .DBBranch.CommitID}}">{{ShortSha .DBBranch.CommitID}}</a> · <span class="commit-message">{{ctx.RenderUtils.RenderCommitMessage .DBBranch.CommitMessage $.Repository}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .DBBranch.CommitTime}}{{if .DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DBBranch.Pusher}} &nbsp;{{template "shared/user/namelink" .DBBranch.Pusher}}{{end}}</p>
 							{{end}}
 							</td>
-							<td class="two wide ui">
+							<td class="two wide">
 							{{if and (not .DBBranch.IsDeleted) $.DefaultBranchBranch}}
 								{{$tooltipDivergence := ""}}
 								{{if or .CommitsBehind .CommitsAhead}}
@@ -127,21 +126,21 @@
 								</div>
 							{{end}}
 							</td>
-							<td class="two wide tw-text-right">
+							<td class="three wide tw-text-right">
 								{{if not .LatestPullRequest}}
 									{{if .IsIncluded}}
 										<span class="ui orange large label" data-tooltip-content="{{ctx.Locale.Tr "repo.branch.included_desc"}}">
 											{{svg "octicon-git-pull-request"}} {{ctx.Locale.Tr "repo.branch.included"}}
 										</span>
 								{{else if and (not .DBBranch.IsDeleted) $.AllowsPulls (gt .CommitsAhead 0)}}
-									<a href="{{$.PullRequestCtx.MakeDefaultCompareLink .DBBranch.Name}}?expand=1">
+									<a class="ui compact basic button tw-m-0 tw-max-w-full" href="{{$.PullRequestCtx.MakeDefaultCompareLink .DBBranch.Name}}?expand=1">
-										<button id="new-pull-request" class="ui compact basic button tw-mr-0">{{if $.CanPull}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}</button>
+										<span class="gt-ellipsis">{{if $.CanPull}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}</span>
 									</a>
 									{{end}}
 								{{else if and .LatestPullRequest.HasMerged .MergeMovedOn}}
 									{{if and (not .DBBranch.IsDeleted) $.AllowsPulls (gt .CommitsAhead 0)}}
-									<a href="{{$.PullRequestCtx.MakeDefaultCompareLink .DBBranch.Name}}?expand=1">
+									<a class="ui compact basic button tw-m-0 tw-max-w-full" href="{{$.PullRequestCtx.MakeDefaultCompareLink .DBBranch.Name}}?expand=1">
-										<button id="new-pull-request" class="ui compact basic button tw-mr-0">{{if $.CanPull}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}</button>
+										<span class="gt-ellipsis">{{if $.CanPull}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}</span>
 									</a>
 									{{end}}
 								{{else}}
@@ -155,8 +154,8 @@
 									{{end}}
 								{{end}}
 							</td>
-							{{/* FIXME: here and above, the tw-overflow-visible is not quite right */}}
+							<td class="three wide">
-							<td class="three wide tw-text-right tw-overflow-visible">
+								<div class="tw-flex tw-flex-wrap tw-justify-end">
 								{{if and $.IsWriter $.Repository.CanContentChange (not .DBBranch.IsDeleted)}}
 									<button class="btn interact-bg tw-p-2 show-modal show-create-branch-modal"
 										data-branch-from="{{.DBBranch.Name}}"
@@ -202,6 +201,7 @@
 										</button>
 									{{end}}
 								{{end}}
+								</div>
 							</td>
 						</tr>
 					{{end}}

templates/repo/issue/card.tmpl

@@ -68,7 +68,7 @@
 			{{range $label := .Labels}}
 				{{$link := print $.Issue.Repo.Link "/issues"}}
 				{{$link = QueryBuild $link "labels" $label.ID}}
-				{{ctx.RenderUtils.RenderLabelWithLink $label $link}}
+				<a class="item" href="{{$link}}">{{ctx.RenderUtils.RenderLabel $label}}</a>
 			{{end}}
 		</div>
 		{{if .Assignees}}

templates/repo/issue/view_content/comments.tmpl

@@ -169,7 +169,7 @@
 			</div>
 		{{else if eq .Type 7}}
 			{{if or .AddedLabels .RemovedLabels}}
-				<div class="timeline-item event with-labels-list-inline" id="{{.HashTag}}">
+				<div class="timeline-item event" id="{{.HashTag}}">
 					<span class="badge">{{svg "octicon-tag"}}</span>
 					{{template "shared/user/avatarlink" dict "user" .Poster}}
 					<span class="comment-text-line">

templates/shared/issuelist.tmpl

@@ -15,17 +15,19 @@
 
 			<div class="item-main">
 				<div class="item-header">
-					<div class="item-title">
+					<div>
-						<a class="tw-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
+						<a class="issue-item-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 						{{if .IsPull}}
 							{{if (index $.CommitStatuses .PullRequest.ID)}}
+								<span class="tw-align-[1px]">{{/* make the "flex" children align with parent "inline" */}}
 								{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID)}}
+								</span>
 							{{end}}
 						{{end}}
 						<span class="labels-list">
-							{{range .Labels}}
+							{{- range .Labels -}}
-								<a href="?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">{{ctx.RenderUtils.RenderLabel .}}</a>
+								<a class="item" href="?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">{{ctx.RenderUtils.RenderLabel .}}</a>
-							{{end}}
+							{{- end -}}
 						</span>
 					</div>
 					{{if .TotalTrackedTime}}

templates/user/dashboard/feeds.tmpl

@@ -107,7 +107,7 @@
 				{{else if .GetOpType.InActions "create_pull_request"}}
 					<span class="tw-inline-block tw-truncate issue title">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
 				{{else if .GetOpType.InActions "comment_issue" "approve_pull_request" "reject_pull_request" "comment_pull"}}
-					<a href="{{.GetCommentLink ctx}}" class="tw-inline-block tw-truncate tw-self-start issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
+					<a href="{{.GetCommentLink ctx}}" class="tw-inline-block tw-truncate tw-max-w-full tw-self-start issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 					{{$comment := index .GetIssueInfos 1}}
 					{{if $comment}}
 						<div class="render-content markup truncated-markup">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>

tests/integration/issue_test.go

@@ -34,7 +34,7 @@ import (
 func getIssuesSelection(t testing.TB, htmlDoc *HTMLDoc) *goquery.Selection {
 	issueList := htmlDoc.doc.Find("#issue-list")
 	assert.Equal(t, 1, issueList.Length())
-	return issueList.Find(".item").Find(".issue-title")
+	return issueList.Find(".item").Find(".issue-item-title")
 }
 
 func getIssue(t *testing.T, repoID int64, issueSelection *goquery.Selection) *issues_model.Issue {

web_src/css/base.css

@@ -305,6 +305,15 @@ a.suppressed:hover {
   color: inherit;
 }
 
+/* keyboard focus ring for interactive elements */
+a:focus-visible,
+button:focus-visible,
+.ui.button:focus-visible,
+[role="button"]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
 a.silenced:hover {
   text-decoration-line: none;
 }

web_src/css/modules/button.css

@@ -21,10 +21,6 @@
   white-space: nowrap;
 }
 
-.ui.button:focus-visible {
-  box-shadow: inset 0 0 0 2px currentcolor;
-}
-
 @media (max-width: 767.98px) {
   .ui.button {
     white-space: normal;

web_src/css/modules/label.css

@@ -258,30 +258,37 @@ a.ui.ui.ui.grey.label:hover {
   font-size: 1rem;
 }
 
-/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout.
+/* labels-list layout: span.labels-list > a.item > span.ui.label,
-If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
+by default, the labels list is rendered as "display: inline",
+it can also be rendered as flex by adding flex-related classes (the general ".item" selector also applies) */
 .labels-list {
-  display: contents;
+  max-width: 100%; /* for ellipsis */
-  font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
+  font-size: var(--font-size-label); /* must match the label font size, otherwise the height mismatches */
 }
 
-.labels-list a {
+.labels-list > .item {
-  display: inline-flex;
   max-width: 100%; /* for ellipsis */
 }
 
+.labels-list a:hover {
+  text-decoration: none;
+}
+
 .labels-list .ui.label {
   min-height: 20px;
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.with-labels-list-inline .labels-list .ui.label + .ui.label {
+/* to align with different font sizes, these styles need to be written separately */
-  margin-left: var(--gap-inline);
+#issue-list .labels-list > .item {
+  margin-right: 4px; /* margin-right (not margin-left) keeps wrapped labels left-aligned */
+  vertical-align: 2.5px; /* compensates inline-flex baseline so labels center with text */
 }
 
-.with-labels-list-inline .labels-list .ui.label {
+.timeline-item .labels-list > .item {
-  line-height: var(--line-height-default);
+  margin-right: 4px;
+  vertical-align: 1.5px;
 }
 
 /* Scoped labels with different colors on left and right */

web_src/css/repo.css

@@ -516,10 +516,8 @@ td .commit-summary {
 }
 
 .repository.view.issue .comment-list .timeline-item .comment-text-line {
-  /* TODO: this "line-height" is not ideal (actually it is abused), many layouts depend on this magic value,
-      for example: alignment of the header arrow and the avatar, view PR commit list left icon layout, dismiss review with reason, etc */
-  line-height: 32px;
   color: var(--color-text-light);
+  flex: 1;
   min-width: 0;
 }
 
@@ -646,11 +644,6 @@ td .commit-summary {
   align-items: center;
 }
 
-.repository.view.issue .comment-list .event > .comment-text-line {
-  flex: 1;
-  min-width: 0;
-}
-
 .repository.view.issue .comment-list .event > .detail {
   margin-left: 15px;
   width: 100%;

web_src/css/repo/issue-list.css

@@ -34,6 +34,13 @@
   }
 }
 
+#issue-list .issue-item-title {
+  font-size: 16px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  text-decoration: none;
+}
+
 #issue-list .branches {
   display: inline-flex;
 }

web_src/css/repo/reactions.css

@@ -5,12 +5,12 @@
 }
 
 .timeline-item .conversation-holder .bottom-reactions {
-  margin: 1em 0 0 36px;
+  margin: 1em 0 0 24px;
   padding-bottom: 8px;
 }
 
 .bottom-reactions .ui.label {
-  padding: 5px 8px;
+  padding: 2px 6px;
   font-weight: var(--font-weight-normal);
 }
 

web_src/css/shared/flex-list.css

@@ -74,8 +74,6 @@
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
-  /* labels are under effect of this gap here because they are display:contents. Ideally we should make wrapping
-     of labels work without display: contents and set this to a static value again. */
   gap: var(--gap-inline);
   max-width: 100%;
   color: var(--color-text);

web_src/js/components/ActionRunJobView.vue

@@ -411,7 +411,7 @@ async function hashChangeListener() {
     </div>
     <div class="job-info-header-right">
       <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
-        <button class="ui button tw-px-3">
+        <button class="btn interact-bg tw-p-2">
           <SvgIcon name="octicon-gear" :size="18"/>
         </button>
         <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
@@ -463,8 +463,9 @@ async function hashChangeListener() {
         />
         <SvgIcon
           v-else
-          :name="currentJobStepsStates[stepIdx].expanded ? 'octicon-chevron-down' : 'octicon-chevron-right'"
+          name="octicon-chevron-right"
-          :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"
+          class="tw-mr-2 step-summary-chevron"
+          :class="{'tw-invisible': !isExpandable(jobStep.status)}"
         />
         <ActionStatusIcon :status="jobStep.status" icon-variant="circle-fill" class="tw-mr-2"/>
         <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
@@ -564,6 +565,14 @@ async function hashChangeListener() {
   background: var(--color-console-hover-bg);
 }
 
+.job-step-container .job-step-summary .step-summary-chevron {
+  transition: transform 0.1s ease;
+}
+
+.job-step-container .job-step-summary.selected .step-summary-chevron {
+  transform: rotate(90deg);
+}
+
 .job-step-container .job-step-summary .step-summary-msg {
   flex: 1;
 }
@@ -707,13 +716,25 @@ async function hashChangeListener() {
 }
 
 .job-log-group-summary {
+  cursor: pointer;
   position: relative;
+  display: list-item;
+  list-style: disclosure-closed inside;
+  padding-left: 58px; /* line-num gutter (48px) + log-msg margin (10px), so the marker sits in the content column */
+}
+
+.job-log-group[open] > .job-log-group-summary {
+  list-style-type: disclosure-open;
 }
 
 .job-log-group-summary > .job-log-line {
   position: absolute;
   inset: 0;
-  z-index: -1; /* to avoid hiding the triangle of the "details" element */
+  z-index: -1; /* sit behind the disclosure marker */
   overflow: hidden;
 }
+
+.job-log-group-summary > .job-log-line .log-msg {
+  margin-left: 21px;
+}
 </style>

web_src/js/components/RepoActionView.vue

@@ -142,35 +142,36 @@ async function deleteArtifact(name: string) {
     <div class="action-view-body">
       <div class="action-view-left">
         <!-- summary -->
-        <a class="job-brief-item silenced" :href="run.viewLink" :class="!props.jobId ? 'selected' : ''">
+        <div class="flex-items-block action-view-sidebar-list">
-          <SvgIcon name="octicon-home"/>
+          <a class="item silenced" :href="run.viewLink" :class="!props.jobId ? 'selected' : ''">
-          <span class="gt-ellipsis">{{ locale.summary }}</span>
+            <SvgIcon name="octicon-home"/>
-        </a>
+            <span class="gt-ellipsis">{{ locale.summary }}</span>
+          </a>
+        </div>
 
         <!-- jobs list -->
         <div class="ui divider"/>
         <div class="left-list-header">{{ locale.allJobs }}</div>
-        <!-- unlike other lists, the items have paddings already -->
+        <div class="flex-items-block action-view-sidebar-list">
-        <ul class="ui relaxed list flex-items-block tw-p-0">
+          <div class="item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
-          <li class="item job-brief-item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
+            <a class="flex-text-block tw-flex-1 silenced" :href="job.link">
-            <a class="tw-contents silenced" :href="job.link">
               <ActionStatusIcon :locale-status="locale.status[job.status]" :status="job.status" icon-variant="circle-fill"/>
               <span class="tw-flex-1 gt-ellipsis">{{ job.name }}</span>
-              <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
+              <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-rerun-button tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
-              <span>{{ job.duration }}</span>
+              <span class="job-duration">{{ job.duration }}</span>
             </a>
-          </li>
+          </div>
-        </ul>
+        </div>
 
         <!-- artifacts list -->
         <template v-if="artifacts.length > 0">
           <div class="ui divider"/>
           <div class="left-list-header">{{ locale.artifactsTitle }} ({{ artifacts.length }})</div>
-          <ul class="ui relaxed list flex-items-block">
+          <div class="flex-items-block action-view-sidebar-list">
-            <li class="item" v-for="artifact in artifacts" :key="artifact.name">
+            <div class="item" v-for="artifact in artifacts" :key="artifact.name">
               <template v-if="artifact.status !== 'expired'">
                 <a
-                  class="tw-flex-1 flex-text-block muted" target="_blank"
+                  class="tw-flex-1 tw-min-w-0 flex-text-block silenced" target="_blank"
                   :href="buildArtifactLink(artifact.name)"
                   :data-tooltip-content="buildArtifactTooltipHtml(artifact, locale.artifactExpiresAt)"
                   data-tooltip-render="html"
@@ -179,7 +180,7 @@ async function deleteArtifact(name: string) {
                   <SvgIcon name="octicon-file" class="tw-text-text-light"/>
                   <span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
                 </a>
-                <a v-if="run.canDeleteArtifact" class="muted" @click="deleteArtifact(artifact.name)">
+                <a v-if="run.canDeleteArtifact" class="silenced" @click="deleteArtifact(artifact.name)">
                   <SvgIcon name="octicon-trash"/>
                 </a>
               </template>
@@ -188,21 +189,21 @@ async function deleteArtifact(name: string) {
                 <span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
                 <span class="ui label tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
               </span>
-            </li>
+            </div>
-          </ul>
+          </div>
         </template>
 
         <!-- run details -->
         <div class="ui divider"/>
         <div class="left-list-header">{{ locale.runDetails }}</div>
-        <ul class="ui relaxed list">
+        <div class="flex-items-block action-view-sidebar-list">
-          <li class="item">
+          <div class="item">
-            <a class="flex-text-block" :href="`${run.link}/workflow`">
+            <a class="flex-text-block silenced" :href="`${run.link}/workflow`">
               <SvgIcon name="octicon-file-code" class="tw-text-text"/>
               <span class="gt-ellipsis">{{ locale.workflowFile }}</span>
             </a>
-          </li>
+          </div>
-        </ul>
+        </div>
       </div>
 
       <div class="action-view-right">
@@ -309,29 +310,44 @@ async function deleteArtifact(name: string) {
   color: var(--color-text-light-2);
 }
 
-.action-view-left .ui.relaxed.list {
+.action-view-sidebar-list {
   margin: var(--gap-block) 0;
-  padding-left: 10px;
 }
 
-.job-brief-item {
+.action-view-sidebar-list:first-child {
+  margin-top: 0;
+}
+
+.action-view-sidebar-list > .item {
   padding: 6px 10px;
   border-radius: var(--border-radius);
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: var(--gap-block);
 }
 
-.job-brief-item:hover {
+.action-view-sidebar-list > .item:hover {
   background-color: var(--color-hover);
 }
 
-.job-brief-item.selected {
+.action-view-sidebar-list > .item.selected {
   font-weight: var(--font-weight-bold);
   background-color: var(--color-active);
 }
 
+/* the re-run button replaces the duration on hover/focus */
+.action-view-sidebar-list > .item .job-rerun-button {
+  display: none;
+}
+
+.action-view-sidebar-list > .item:hover .job-rerun-button,
+.action-view-sidebar-list > .item:focus-within .job-rerun-button {
+  display: inline-flex;
+}
+
+/* only swap out the duration when a re-run button exists to take its place */
+.action-view-sidebar-list > .item:hover .job-rerun-button ~ .job-duration,
+.action-view-sidebar-list > .item:focus-within .job-rerun-button ~ .job-duration {
+  display: none;
+}
+
 /* ================ */
 /* action view right */