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.

diff --git a/ui/web/src/skins/modern/modern.css b/ui/web/src/skins/modern/modern.css
index 25abb1000884a24b5aa747fe5abbcf34fa78cfb6..370ed11bc4717dd28680774d3f771be08fb7b622 100644 (file)
--- 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 ─────────────────────────────────────────────────── */