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>
This commit is contained in:
silverwind
2026-05-21 09:02:05 +02:00
committed by GitHub
parent 93b8fdcd68
commit 2e96e8227f
17 changed files with 154 additions and 125 deletions

View File

@@ -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 class="tw-text-right tw-overflow-visible">
<td>
<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"}}
</div>
{{ctx.Locale.Tr "repo.branches"}}
</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">
<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>
<a class="ui compact basic button tw-m-0 tw-max-w-full" href="{{$.PullRequestCtx.MakeDefaultCompareLink .DBBranch.Name}}?expand=1">
<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">
<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>
<a class="ui compact basic button tw-m-0 tw-max-w-full" href="{{$.PullRequestCtx.MakeDefaultCompareLink .DBBranch.Name}}?expand=1">
<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 tw-text-right tw-overflow-visible">
<td class="three wide">
<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}}

View File

@@ -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}}

View File

@@ -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">

View File

@@ -15,17 +15,19 @@
<div class="item-main">
<div class="item-header">
<div class="item-title">
<a class="tw-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
<div>
<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}}
<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>
{{end}}
{{- range .Labels -}}
<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 -}}
</span>
</div>
{{if .TotalTrackedTime}}

View File

@@ -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>