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

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: wxiaoguang <wxiaoguang@gmail.com>

models/actions/run.go

@@ -121,7 +121,7 @@ func (run *ActionRun) PrettyRef() string {
 	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 {
 	payload, err := run.GetPullRequestEventPayload()
 	if err == nil && payload != nil && payload.PullRequest != nil {

templates/repo/actions/runs_list.tmpl

@@ -38,7 +38,7 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="item-trailing">
+			<div class="run-list-item-trailing">
 				{{if $run.IsRefDeleted}}
 					<span class="ui label run-list-ref gt-ellipsis tw-line-through" data-tooltip-content="{{$run.RefTooltip}}">{{$run.PrettyRef}}</span>
 				{{else}}

web_src/css/actions.css

@@ -43,26 +43,29 @@
   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;
   width: 280px;
   flex: 0 0 280px;
 }
 
-.run-list-ref {
-  display: inline-block !important;
-  max-width: 105px;
+.ui.label.run-list-ref {
+  display: inline-block;
+  max-width: 110px;
 }
 
 @media (max-width: 767.98px) {
-  .run-list .item-trailing {
+  .run-list-item-trailing {
     flex-direction: column;
     align-items: flex-end;
-    width: auto;
-    flex-basis: auto;
+    max-width: 30%;
+    flex: 0 0 30%;
   }
-  .run-list-item-right,
-  .run-list-ref {
+  .run-list-item-right {
     max-width: 110px;
   }
 }