Fix UI regression (#37218) (#37219)

Backport #37218 by wxiaoguang

Fix  #37213

Also fix the misaligned tags, remove unused classes, etc.

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

tailwind.config.ts

@@ -93,6 +93,9 @@ export default {
         return [`${i}`, `${i === 0 ? '0' : `${i}px`}`];
       })),
     },
+    extend: {
+      zIndex: {'1': '1'},
+    },
   },
   plugins: [
     plugin(({addUtilities}) => {

templates/repo/actions/list.tmpl

@@ -25,49 +25,49 @@
 				</div>
 			</div>
 			<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>
-						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-						<div class="menu">
-							<div class="ui icon search input">
-								<i class="icon">{{svg "octicon-search"}}</i>
-								<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.actor"}}">
-							</div>
-							<a class="item{{if not $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&status={{$.CurStatus}}&actor=0">
-								{{ctx.Locale.Tr "actions.runs.actors_no_select"}}
-							</a>
-							{{range .Actors}}
-								<a class="item{{if eq .ID $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{.ID}}&status={{$.CurStatus}}">
-									{{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
+				<div class="ui top attached header flex-text-block tw-flex-wrap tw-justify-between">
+					<strong>{{ctx.Locale.TrN .Page.Paginater.Total "actions.runs.workflow_run_count_1" "actions.runs.workflow_run_count_n" .Page.Paginater.Total}}</strong>
+					<div class="ui secondary filter menu flex-text-block 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>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+							<div class="menu">
+								<div class="ui icon search input">
+									<i class="icon">{{svg "octicon-search"}}</i>
+									<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.actor"}}">
+								</div>
+								<a class="item{{if not $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&status={{$.CurStatus}}&actor=0">
+									{{ctx.Locale.Tr "actions.runs.actors_no_select"}}
 								</a>
-							{{end}}
-						</div>
-					</div>
-					<!-- Status -->
-					<div class="ui dropdown jump item">
-						<span class="text">{{ctx.Locale.Tr "actions.runs.status"}}</span>
-						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-						<div class="menu">
-							<div class="ui icon search input">
-								<i class="icon">{{svg "octicon-search"}}</i>
-								<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.status"}}">
+								{{range .Actors}}
+									<a class="item{{if eq .ID $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{.ID}}&status={{$.CurStatus}}">
+										{{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
+									</a>
+								{{end}}
+							</div>
+						</div>
+						<!-- Status -->
+						<div class="ui dropdown jump item">
+							<span class="text">{{ctx.Locale.Tr "actions.runs.status"}}</span>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+							<div class="menu">
+								<div class="ui icon search input">
+									<i class="icon">{{svg "octicon-search"}}</i>
+									<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.status"}}">
+								</div>
+								<a class="item{{if not $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status=0">
+									{{ctx.Locale.Tr "actions.runs.status_no_select"}}
+								</a>
+								{{range .StatusInfoList}}
+									<a class="item{{if eq .Status $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{.Status}}">
+										{{.DisplayedStatus}}
+									</a>
+								{{end}}
 							</div>
-							<a class="item{{if not $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status=0">
-								{{ctx.Locale.Tr "actions.runs.status_no_select"}}
-							</a>
-							{{range .StatusInfoList}}
-								<a class="item{{if eq .Status $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{.Status}}">
-									{{.DisplayedStatus}}
-								</a>
-							{{end}}
 						</div>
-					</div>
 
-					{{if .AllowDisableOrEnableWorkflow}}
+						{{if .AllowDisableOrEnableWorkflow}}
 						<button class="ui jump dropdown btn interact-bg tw-p-2">
 							{{svg "octicon-kebab-horizontal"}}
 							<div class="menu">
@@ -76,7 +76,7 @@
 								</a>
 							</div>
 						</button>
-					{{end}}
+						{{end}}
 					</div>
 				</div>
 

templates/repo/actions/workflow_dispatch.tmpl

@@ -1,6 +1,9 @@
-<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>
+{{/* "z-index" is used to maintain continuous attached styling and keep the colored border-bottom visible (pre-existing fomantic issue with negative margins) */}}
+<div class="ui blue info attached message flex-text-block tw-flex-wrap tw-justify-between tw-z-1">
+	<span>{{ctx.Locale.Tr "actions.workflow.has_workflow_dispatch"}}</span>
+	<div class="flex-text-block tw-bg-box-body tw-rounded">{{/*make the button have correct hovered color */}}
+		<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>
 </div>
 <div id="runWorkflowDispatchModal" class="ui tiny modal">
 	<div class="content">

web_src/css/modules/message.css

@@ -84,15 +84,6 @@
   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;