From 4998c9848c6909bcdd31e8c5e6a2fd5847c0c875 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@piment-noir.org>
Date: Fri, 14 Aug 2026 20:03:20 +0200
Subject: [PATCH] fix(webui): keep modern station-card Delete action aligned on
 the footer row (#2083)

The modern station-card footer laid the 5 action buttons in a non-wrapping
inline-flex group beside the Delete button, inside a wrapping footer. Once the
group's max-content width exceeded the card, the footer broke the line between
the group and Delete, dropping Delete onto its own row where margin-left:auto
pinned it bottom-right (orphaned) instead of aligned with the other actions.

Make the footer a single flex line (flex-wrap: nowrap) and let the action
group wrap its buttons internally (flex-wrap: wrap) so it reflows across rows
on narrow cards while Delete stays on the same row, pinned right. align-self:
flex-start top-aligns Delete with the first action row when the group wraps.

Presentational modern-skin CSS only; no markup or handler change.
---
 ui/web/src/skins/modern/modern.css | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/ui/web/src/skins/modern/modern.css b/ui/web/src/skins/modern/modern.css
index 25abb100..370ed11b 100644
--- a/ui/web/src/skins/modern/modern.css
+++ b/ui/web/src/skins/modern/modern.css
@@ -592,9 +592,12 @@ html[data-skin='modern'] #app {
   text-align: center;
 }
 
+/* Single flex line: keep the action group and the Delete button on one
+ * row so the group can never push Delete onto its own wrapped line. When
+ * space is tight the group (below) wraps its buttons internally instead. */
 .modern-card__foot {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: var(--skin-space-2);
   padding: var(--skin-space-3) var(--skin-space-4);
@@ -602,17 +605,25 @@ html[data-skin='modern'] #app {
   border-top: 1px solid var(--skin-border);
 }
 
+/* Wrap the primary/secondary actions internally on narrow cards; the
+ * group shrinks and reflows its buttons across rows rather than forcing
+ * the footer to break Delete off. */
 .modern-card__foot-group {
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--skin-space-2);
   align-items: center;
 }
 
 /* Push the danger action to the right. The red outline carries the
  * "destructive, different category" signal by itself — no extra divider
- * needed, which would disrupt the button's rounded shape. */
+ * needed, which would disrupt the button's rounded shape. align-self keeps
+ * Delete top-aligned with the first action row when the group wraps (it is
+ * a no-op on single-row cards), so it reads as a top-right peer instead of
+ * floating at the group's vertical centre. */
 .modern-card__foot > .modern-btn--danger {
   margin-left: auto;
+  align-self: flex-start;
 }
 
 /* ── Connector row ─────────────────────────────────────────────────── */
-- 
2.53.0