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>

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;
+}