fix(ui): actions list layout breakage with long content (#10648)

Fixes the layout of the actions list specifically when an action name is too long to be displayed within the column's constrained width.

I took the opportunity to add some ancillary improvements:
- Center elements vertically
- Space elements consistently: the error badge didn't have the same margin on the left like the disabled badge.

Fixes #4580

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10648
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: Luis <luis@adame.dev>
Co-committed-by: Luis <luis@adame.dev>

templates/repo/actions/list_inner.tmpl

@@ -1,12 +1,16 @@
 {{if .HasWorkflowsOrRuns}}
 <div class="ui stackable grid">
 	<div class="four wide column">
-		<div class="ui fluid vertical menu">
+		<div class="ui fluid vertical menu actions-menu">
 			<a class="item{{if not $.CurWorkflow}} active{{end}}" href="?actor={{$.CurActor}}&status={{$.CurStatus}}">{{ctx.Locale.Tr "actions.runs.all_workflows"}}</a>
 			{{range .workflows}}
-				<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
+				<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">
+					<span class="content" data-tooltip-content="{{.Entry.Name}}">
+						{{.Entry.Name}}
+					</span>
+
 					{{if .ErrMsg}}
-						<span data-tooltip-content="{{.ErrMsg}}">
+						<span class="error" data-tooltip-content="{{.ErrMsg}}">
 							{{svg "octicon-alert" 16 "text red"}}
 						</span>
 					{{end}}

web_src/css/actions.css

@@ -55,7 +55,7 @@
 .run-list-item-right .run-list-meta {
   display: flex;
   flex-wrap: nowrap;
-  gap: .25rem;
+  gap: 0.25rem;
   align-items: center;
 }
 
@@ -107,3 +107,24 @@
     transform: rotate(-360deg);
   }
 }
+
+.ui.vertical.menu .item:not(:has(> :nth-child(1))),
+.ui.vertical.menu .item .content {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ui.vertical.menu .item:has(.content) {
+  display: flex;
+}
+
+.ui.vertical.menu.actions-menu .item .error {
+  display: flex;
+  align-items: center;
+  margin-left: 1rem;
+}
+
+.ui.vertical.menu.actions-menu .item .label {
+  flex-shrink: 0;
+}