Add background and run count to actions list page (#36707)

Use flex-container layout and wrap the actions runs list with `ui top
attached header` and `ui attached segment` to add a background. Display
the total workflow run count in the header.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

options/locale/locale_en-US.json

@@ -3674,6 +3674,8 @@
   "actions.runners.reset_registration_token_confirm": "Would you like to invalidate the current token and generate a new one?",
   "actions.runners.reset_registration_token_success": "Runner registration token reset successfully",
   "actions.runs.all_workflows": "All Workflows",
+  "actions.runs.workflow_run_count_1": "%d workflow run",
+  "actions.runs.workflow_run_count_n": "%d workflow runs",
   "actions.runs.commit": "Commit",
   "actions.runs.scheduled": "Scheduled",
   "actions.runs.pushed_by": "pushed by",

templates/repo/actions/list.tmpl

@@ -5,8 +5,8 @@
 		{{template "base/alert" .}}
 
 		{{if .HasWorkflowsOrRuns}}
-		<div class="ui stackable grid">
-			<div class="four wide column">
+		<div class="flex-container">
+			<div class="flex-container-nav">
 				<div class="ui fluid vertical menu flex-items-block">
 					<a class="item {{if not $.CurWorkflow}}active{{end}}" href="?actor={{$.CurActor}}&status={{$.CurStatus}}">{{ctx.Locale.Tr "actions.runs.all_workflows"}}</a>
 					{{range .workflows}}
@@ -24,8 +24,10 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="twelve wide column content">
-				<div class="ui secondary filter menu tw-justify-end tw-flex tw-items-center">
+			<div class="flex-container-main">
+				<div class="ui top attached header tw-flex tw-items-center tw-justify-between">
+					<span class="tw-text-base tw-font-semibold">{{ctx.Locale.TrN .Page.Paginater.Total "actions.runs.workflow_run_count_1" "actions.runs.workflow_run_count_n" .Page.Paginater.Total}}</span>
+					<div class="ui secondary filter menu tw-flex tw-items-center tw-m-0">
 					<!-- Actor -->
 					<div class="ui{{if not .Actors}} disabled{{end}} dropdown jump item">
 						<span class="text">{{ctx.Locale.Tr "actions.runs.actor"}}</span>
@@ -75,13 +77,16 @@
 							</div>
 						</button>
 					{{end}}
+					</div>
 				</div>
 
 				{{if .WorkflowDispatchConfig}}
 					{{template "repo/actions/workflow_dispatch" .}}
 				{{end}}
 
-				{{template "repo/actions/runs_list" .}}
+				<div class="ui attached segment">
+					{{template "repo/actions/runs_list" .}}
+				</div>
 			</div>
 		</div>
 		{{else}}

templates/repo/actions/workflow_dispatch.tmpl

@@ -1,4 +1,4 @@
-<div class="ui blue info message tw-flex tw-justify-between tw-items-center">
+<div class="ui blue info attached message tw-relative tw-z-10 tw-flex tw-justify-between tw-items-center">
 	<span class="ui text middle">{{ctx.Locale.Tr "actions.workflow.has_workflow_dispatch"}}</span>
 	<button class="ui mini button show-modal" data-modal="#runWorkflowDispatchModal">{{ctx.Locale.Tr "actions.workflow.run"}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}</button>
 </div>

web_src/css/modules/message.css

@@ -101,6 +101,15 @@
   border-color: var(--color-warning-border);
 }
 
+/* use opaque colors for buttons inside colored messages */
+.ui.message .ui.button:hover {
+  background: var(--color-secondary);
+}
+
+.ui.message .ui.button:active {
+  background: var(--color-secondary-hover);
+}
+
 .ui.message > .close.icon {
   cursor: pointer;
   position: absolute;