From 88202efddbcab4d123b95787f0285e2d682af888 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Sat, 25 Jul 2026 01:49:18 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20Station=20Control=20masonry=20layout=20?=
 =?UTF-8?q?=E2=80=94=20pack=20cards=20into=20balanced=20columns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

flex-wrap with fixed-width cards started each new row below the TALLEST card of
the previous row, leaving big gaps under short panels (e.g. the amplifier alone
on a second line). Switch the dashboard to balanced CSS columns (column-width
430px, break-inside-avoid): cards flow top-to-bottom and pack tightly by height.
"Auto" fits as many columns as the window allows; 1-4 cap the column count via
the container max-width. Grip-drag reorder unchanged. Changelog 0.21.1.
---
 changelog.json                                  |  6 ++++--
 frontend/src/components/StationControlPanel.tsx | 15 ++++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/changelog.json b/changelog.json
index 51f9bc9..cd001e4 100644
--- a/changelog.json
+++ b/changelog.json
@@ -4,11 +4,13 @@
     "date": "2026-07-24",
     "en": [
       "Fixed the colour theme sometimes reverting to the default when reopening OpsLog — it's now restored reliably.",
-      "ADIF export field picker: the per-group All / None buttons work again."
+      "ADIF export field picker: the per-group All / None buttons work again.",
+      "Station Control: cards now pack tightly into balanced columns instead of leaving big gaps under shorter panels — a cleaner, more even dashboard."
     ],
     "fr": [
       "Correction du thème qui revenait parfois au défaut à la réouverture d'OpsLog — il est maintenant restauré de façon fiable.",
-      "Sélecteur de champs à l'export ADIF : les boutons Tout / Aucun par groupe refonctionnent."
+      "Sélecteur de champs à l'export ADIF : les boutons Tout / Aucun par groupe refonctionnent.",
+      "Station Control : les cartes se rangent en colonnes équilibrées et se tassent au lieu de laisser de gros trous sous les panneaux plus courts — tableau de bord plus propre et régulier."
     ]
   },
   {
diff --git a/frontend/src/components/StationControlPanel.tsx b/frontend/src/components/StationControlPanel.tsx
index b4bb39c..94b19ae 100644
--- a/frontend/src/components/StationControlPanel.tsx
+++ b/frontend/src/components/StationControlPanel.tsx
@@ -442,14 +442,15 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
         </div>
       )}
 
-      {/* Dashboard of FIXED-WIDTH cards that wrap. "Auto" fills the window; a fixed
-          column count caps the container width so cards wrap onto more lines. Each
-          card has a grip handle (left rail) as the drag initiator (the card body is
-          full of buttons, so dragging the whole card was unreliable). */}
-      <div className="flex flex-wrap gap-4 items-start"
-        style={cols !== 'auto' ? { maxWidth: `${Number(cols) * 446}px` } : undefined}>
+      {/* Masonry dashboard: fixed-width cards flow into balanced CSS columns so
+          they pack tightly by height (no ragged gaps under short cards). "Auto"
+          fits as many ~430px columns as the window allows; a fixed count caps the
+          container width to that many columns. Each card has a grip handle (left
+          rail) as the drag initiator (the body is full of buttons). */}
+      <div style={{ columnWidth: '430px', columnGap: '1rem', columnFill: 'balance',
+        ...(cols !== 'auto' ? { maxWidth: `${Number(cols) * 446}px` } : {}) }}>
         {ordered.map((w) => (
-          <div key={w.id} className="flex items-stretch w-[430px]"
+          <div key={w.id} className="flex items-stretch break-inside-avoid mb-4"
             onDragOver={(e) => { if (dragId.current) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; } }}
             onDrop={(e) => { if (dragId.current) { e.preventDefault(); onDrop(w.id); } }}>
             <div draggable