fix(actions): keep workflow run trailing on one row with long branch names (#38382) (#38403)

Backport #38382 by @bircni

The flex-list refactor (#37505) raised the shared `.item-trailing`
selector's specificity, so its `flex-wrap: wrap` started overriding the
run list's intended `flex-wrap: nowrap` — a long branch name pushed the
trailing content past its fixed 280px width and wrapped the kebab menu
onto its own line.

Co-authored-by: bircni <bircni@icloud.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Giteabot
2026-07-10 22:08:24 +00:00
committed by GitHub
co-authored by bircni wxiaoguang
parent b6aa2b61c6
commit b2794f96b9
3 changed files with 14 additions and 11 deletions
+1 -1
View File
@@ -121,7 +121,7 @@ func (run *ActionRun) PrettyRef() string {
return refName.ShortName() return refName.ShortName()
} }
// RefTooltip return a tooltop of run's ref. For pull request, it's the title of the PR, otherwise it's the ShortName. // RefTooltip return a tooltip of run's ref. For pull request, it's the title of the PR, otherwise it's the ShortName.
func (run *ActionRun) RefTooltip() string { func (run *ActionRun) RefTooltip() string {
payload, err := run.GetPullRequestEventPayload() payload, err := run.GetPullRequestEventPayload()
if err == nil && payload != nil && payload.PullRequest != nil { if err == nil && payload != nil && payload.PullRequest != nil {
+1 -1
View File
@@ -38,7 +38,7 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<div class="item-trailing"> <div class="run-list-item-trailing">
{{if $run.IsRefDeleted}} {{if $run.IsRefDeleted}}
<span class="ui label run-list-ref gt-ellipsis tw-line-through" data-tooltip-content="{{$run.RefTooltip}}">{{$run.PrettyRef}}</span> <span class="ui label run-list-ref gt-ellipsis tw-line-through" data-tooltip-content="{{$run.RefTooltip}}">{{$run.PrettyRef}}</span>
{{else}} {{else}}
+12 -9
View File
@@ -43,26 +43,29 @@
align-items: center; align-items: center;
} }
.run-list .item-trailing { .run-list-item-trailing {
display: flex;
gap: var(--gap-block);
align-items: center;
justify-content: end;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 280px; width: 280px;
flex: 0 0 280px; flex: 0 0 280px;
} }
.run-list-ref { .ui.label.run-list-ref {
display: inline-block !important; display: inline-block;
max-width: 105px; max-width: 110px;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.run-list .item-trailing { .run-list-item-trailing {
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
width: auto; max-width: 30%;
flex-basis: auto; flex: 0 0 30%;
} }
.run-list-item-right, .run-list-item-right {
.run-list-ref {
max-width: 110px; max-width: 110px;
} }
} }