ui: drop the "← pick a reference" placeholder in the award ref selector

Empty-state dashed box added clutter; show nothing until a reference is picked.

app.go

@@ -515,6 +515,7 @@ type App struct {
 	pttKeyedMethod string                 // "cat" | "rts" | "dtr" while keyed; "" when idle
 	pttGen         int64                  // bumped on every key; a delayed unkey only fires if unchanged (guards against a stale release cutting a new transmission)
 	startupErr     string                 // captured for surfacing to the frontend
+	settingsScoped atomic.Bool            // true once a.settings is scoped to the active profile — GetUIPref/SetUIPref (per-profile) must wait for it, else an early call reads the wrong scope and e.g. resets the theme
 	dbPath         string                 // settings/config database file (settings + profiles); may be a user-chosen location
 	logbookPath    string                 // default SQLite logbook file (QSOs), next to the settings db — used when a profile doesn't point elsewhere
 	logDb          *sql.DB                // QSO logbook connection — MySQL, a per-profile SQLite file, or the default logbook.db (never the settings db, except on fallback)
@@ -848,6 +849,7 @@ func (a *App) startup(ctx context.Context) {
 		}
 	}
 	a.settings.SetProfile(active.ID)
+	a.settingsScoped.Store(true) // per-profile settings reads (GetUIPref…) are now safe
 	// US county resolver — its own local SQLite (data/uls.db), populated on demand
 	// by DownloadULSCounties. Opening (creating an empty store) is cheap and never
 	// fatal: county resolution simply stays inert until the operator downloads it.
@@ -2013,10 +2015,12 @@ func (a *App) groupDigitalSlots() bool {
 }
 
 func (a *App) GetUIPref(key string) (string, error) {
-	if a.settings == nil {
+	if a.settings == nil || !a.settingsScoped.Load() {
 		// Distinct from a genuinely-empty pref: the (LOCAL SQLite) settings store
-		// isn't wired yet. There's a brief window at launch where the frontend can
-		// call this before OnStartup has opened the DB and built the store. The UI
+		// isn't wired AND scoped to the active profile yet. There's a brief window at
+		// launch where the frontend can call this before it's ready — reading then
+		// returns the wrong profile's (empty) value, which stopped the theme
+		// self-heal early ("dark theme reverts to light on reopen"). The UI
 		// uses the error to keep RETRYING rather than treat it as "unset" and fall
 		// back to a default — the "dark theme reverts to light after an update" bug
 		// (the update cleared localStorage, and the DB read gave up too early while
@@ -2027,8 +2031,8 @@ func (a *App) GetUIPref(key string) (string, error) {
 }
 
 func (a *App) SetUIPref(key, value string) error {
-	if a.settings == nil {
-		return fmt.Errorf("db not initialized")
+	if a.settings == nil || !a.settingsScoped.Load() {
+		return fmt.Errorf("settings store not ready") // avoid seeding the wrong profile scope
 	}
 	return a.settings.Set(a.ctx, "ui."+key, value)
 }

changelog.json

@@ -1,10 +1,38 @@
 [
+  {
+    "version": "0.21.1",
+    "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.",
+      "Station Control: cards now pack tightly into balanced columns instead of leaving big gaps under shorter panels — a cleaner, more even dashboard.",
+      "Main-view band map: Ctrl+↑ / Ctrl+↓ jumps to the next spot above / below the current frequency and tunes to it.",
+      "QSO details → Awards: the 'this contact will count for' list is now compact (CODE@REF chips, full name on hover) with a capped height, so it no longer hides the awards you've selected."
+    ],
+    "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.",
+      "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.",
+      "Band map de l'écran principal : Ctrl+↑ / Ctrl+↓ saute au spot suivant au-dessus / en dessous de la fréquence courante et s'y accorde.",
+      "Détails du QSO → Diplômes : la liste « ce contact comptera pour » est maintenant compacte (pastilles CODE@REF, nom complet au survol) et de hauteur limitée, elle ne masque plus les diplômes sélectionnés."
+    ]
+  },
   {
     "version": "0.21.0",
     "date": "2026-07-24",
     "en": [
       "⚠️ IMPORTANT — ARCHITECTURE CHANGE. OpsLog now keeps your settings/profiles and your QSO logbook in SEPARATE database files (before, everything was in one file). On the first launch after this update, your existing database is split AUTOMATICALLY and non-destructively: your contacts are copied into a new logbook file (logbook.db) while the originals stay untouched in the settings database as a backup — nothing is deleted, no QSO is lost. Existing installs keep their opslog.db as the settings database; fresh installs name it settings.db. As a precaution, back up your OpsLog data folder before updating. Afterwards, Settings → Database shows the settings database and this profile's logbook as two separate sections.",
-      "Your QSOs and your settings now live in separate files: settings + profiles stay in the settings database, while contacts go to a dedicated logbook file (existing logs are migrated automatically, originals kept as a backup). A profile can also point at its own logbook file — ideal for a visiting operator, whose contacts stay out of your log without ever touching your settings or profiles. The Database panel now clearly shows the two, with an 'Open folder' shortcut, and a logbook file can be renamed/relocated (its QSOs move with it).",
+      "Your QSOs and your settings now live in separate files: settings + profiles stay in the settings database, while contacts go to a dedicated logbook file (existing logs are migrated automatically, originals kept as a backup). A profile can also point at its own logbook file — ideal for a visiting operator, whose contacts stay out of your log without ever touching your settings or profiles. The Database panel now clearly shows the two, with an 'Open folder' shortcut, and a logbook file can be renamed/relocated (its QSOs move with it)."
+    ],
+    "fr": [
+      "⚠️ IMPORTANT — CHANGEMENT D'ARCHITECTURE. OpsLog stocke désormais tes réglages/profils et ton journal de QSO dans des fichiers de base de données SÉPARÉS (avant, tout était dans un seul fichier). Au premier lancement après cette mise à jour, ta base existante est scindée AUTOMATIQUEMENT et sans destruction : tes contacts sont copiés dans un nouveau fichier journal (logbook.db) tandis que les originaux restent intacts dans la base de réglages en sauvegarde — rien n'est supprimé, aucun QSO n'est perdu. Les installs existantes gardent leur opslog.db comme base de réglages ; les nouvelles installs la nomment settings.db. Par précaution, sauvegarde ton dossier de données OpsLog avant de mettre à jour. Ensuite, Réglages → Base de données affiche la base de réglages et le journal de ce profil en deux sections distinctes.",
+      "Tes QSO et tes réglages sont désormais dans des fichiers séparés : réglages + profils dans la base de réglages, contacts dans un fichier journal dédié (les journaux existants sont migrés automatiquement, les originaux gardés en sauvegarde). Un profil peut aussi pointer vers son propre fichier journal — idéal pour un opérateur de passage, dont les contacts restent hors de ton journal sans jamais toucher tes réglages ni profils. Le panneau Base de données montre maintenant clairement les deux, avec un raccourci « Ouvrir le dossier », et un fichier journal peut être renommé/déplacé (ses QSO le suivent)."
+    ]
+  },
+  {
+    "version": "0.20.12",
+    "date": "2026-07-24",
+    "en": [
       "Fixed a motorized-antenna bug that could leave a FlexRadio permanently unable to transmit (‘Interlock is preventing transmission’). With a SteppIR whose status frequency reads intermittently (it flipped between the commanded frequency and its home value), the ‘follow the rig’ loop re-sent a tune command on almost every poll, and each command re-armed the ‘block TX while the antenna moves’ window — so the interlock never released. The follow loop now keys its deadband off the rig’s frequency (only re-tuning when the RADIO actually QSYs), immune to a flaky antenna status. Also dropped an ‘interlock set reason=’ command that SmartSDR rejects (it’s read-only) and only produced a harmless error line — the transmit-inhibit itself is unchanged and still holds TX safely while the elements move. New: a SteppIR ‘Tunable range’ setting (Settings → Hardware → Antenna, default 13–54 MHz = 20 m–6 m) — on a band outside it OpsLog leaves the antenna and TX completely alone, so tuning to 30 m on a 20 m–6 m SteppIR no longer tries to move it or touches the interlock.",
       "New built-in award: The Helvetia 26 Award (H26) — the 26 cantons of Switzerland (USKA), matched from the QSO's address or QTH on HF. Each canton also recognises its main cities (Genève, Lausanne, Zürich, Bellinzona…), since operators rarely write the canton itself.",
       "FlexRadio panel: the RECEIVE card is shorter again. All the noise controls added recently made it tower, so only the everyday ones — NB, NR, ANF — now stay visible; WNB and the SmartSDR v4 DSP block (NRL/NRS/NRF/ANFL and the AI/FFT RNN & ANFT) tuck behind a 'DSP' button you expand when you need them. The button carries a dot and highlights when one of the hidden controls is switched on, so nothing active is ever out of sight, and its open/closed state is remembered.",
@@ -18,8 +46,6 @@
       "Fixed the colour theme sometimes resetting to light after an update/relaunch: an update can clear the WebView's localStorage, and the fallback that restores the theme from the local settings database gave up after ~2.4s — occasionally too soon during the brief startup window before that store is ready. It now keeps retrying until the store actually answers, so a dark theme is reliably restored."
     ],
     "fr": [
-      "⚠️ IMPORTANT — CHANGEMENT D'ARCHITECTURE. OpsLog stocke désormais tes réglages/profils et ton journal de QSO dans des fichiers de base de données SÉPARÉS (avant, tout était dans un seul fichier). Au premier lancement après cette mise à jour, ta base existante est scindée AUTOMATIQUEMENT et sans destruction : tes contacts sont copiés dans un nouveau fichier journal (logbook.db) tandis que les originaux restent intacts dans la base de réglages en sauvegarde — rien n'est supprimé, aucun QSO n'est perdu. Les installs existantes gardent leur opslog.db comme base de réglages ; les nouvelles installs la nomment settings.db. Par précaution, sauvegarde ton dossier de données OpsLog avant de mettre à jour. Ensuite, Réglages → Base de données affiche la base de réglages et le journal de ce profil en deux sections distinctes.",
-      "Tes QSO et tes réglages sont désormais dans des fichiers séparés : réglages + profils dans la base de réglages, contacts dans un fichier journal dédié (les journaux existants sont migrés automatiquement, les originaux gardés en sauvegarde). Un profil peut aussi pointer vers son propre fichier journal — idéal pour un opérateur de passage, dont les contacts restent hors de ton journal sans jamais toucher tes réglages ni profils. Le panneau Base de données montre maintenant clairement les deux, avec un raccourci « Ouvrir le dossier », et un fichier journal peut être renommé/déplacé (ses QSO le suivent).",
       "Correction d'un bug d'antenne motorisée qui pouvait laisser un FlexRadio définitivement incapable d'émettre (« Interlock is preventing transmission »). Avec une SteppIR dont la fréquence de statut se lit par intermittence (elle alternait entre la fréquence commandée et sa valeur de repos), la boucle de suivi renvoyait un ordre d'accord à presque chaque cycle, et chaque ordre réarmait la fenêtre « bloquer l'émission pendant que l'antenne bouge » — l'interlock ne se relâchait donc jamais. La boucle de suivi se base maintenant sur la fréquence de la RADIO (elle ne réaccorde que quand le poste change réellement de fréquence), insensible à un statut d'antenne erratique. Retrait aussi d'une commande « interlock set reason= » que SmartSDR refuse (champ en lecture seule) et qui ne produisait qu'une ligne d'erreur sans effet — l'inhibition d'émission elle-même est inchangée et protège toujours pendant le mouvement des éléments. Nouveau : un réglage « Plage accordable » pour la SteppIR (Réglages → Matériel → Antenne, défaut 13-54 MHz = 20 m-6 m) — sur une bande hors de cette plage, OpsLog laisse totalement l'antenne et l'émission tranquilles, donc passer sur 30 m avec une SteppIR 20 m-6 m ne tente plus de la bouger ni ne touche à l'interlock.",
       "Nouveau diplôme intégré : The Helvetia 26 Award (H26) — les 26 cantons de Suisse (USKA), reconnus depuis l'adresse ou le QTH du QSO en HF. Chaque canton reconnaît aussi ses principales villes (Genève, Lausanne, Zürich, Bellinzone…), car les opérateurs écrivent rarement le canton lui-même.",
       "Panneau FlexRadio : la carte RÉCEPTION est de nouveau plus compacte. Tous les contrôles de bruit ajoutés récemment la faisaient s'allonger, donc seuls ceux du quotidien — NB, NR, ANF — restent visibles ; le WNB et le bloc DSP SmartSDR v4 (NRL/NRS/NRF/ANFL ainsi que RNN & ANFT IA/FFT) se replient derrière un bouton « DSP » que tu déplies au besoin. Le bouton porte un point et s'illumine quand l'un des contrôles masqués est activé, pour ne jamais perdre de vue quelque chose d'actif, et son état ouvert/fermé est mémorisé.",

frontend/src/App.tsx

@@ -5320,6 +5320,7 @@ export default function App() {
               currentFreqHz={band && freqMhz ? Math.round(parseFloat(freqMhz) * 1_000_000) : 0}
               onSpotClick={handleSpotClick}
               onClose={() => setBandMapShown(false)}
+              keyNav
             />
           </div>
         )}

frontend/src/components/AwardRefSelector.tsx

@@ -216,8 +216,8 @@ export function AwardRefSelector({ dxcc, value, onChange, fieldValues, heightCla
           <span className="font-mono truncate text-[11px]">{selectedRef?.subgrp || '—'}</span>
         </div>
 
-        {/* Selected ref chip */}
-        {selectedRef ? (
+        {/* Selected ref chip (nothing shown until one is picked) */}
+        {selectedRef && (
           <div className="flex items-center gap-1.5 h-6 px-2 rounded border border-success-border bg-success-muted text-success-muted-foreground text-xs min-w-0">
             <span className="font-mono font-semibold shrink-0">{selectedRef.code}</span>
             <span className="truncate text-[10px] text-success-muted-foreground">{selectedRef.name}</span>
@@ -225,10 +225,6 @@ export function AwardRefSelector({ dxcc, value, onChange, fieldValues, heightCla
               <X className="size-3" />
             </button>
           </div>
-        ) : (
-          <div className="h-6 flex items-center px-2 text-[11px] text-muted-foreground italic border border-dashed border-border rounded">
-            {t('awrs.pickReference')}
-          </div>
         )}
 
         {/* Add — references are always scoped to the contacted DXCC */}

frontend/src/components/BandMap.tsx

@@ -41,6 +41,10 @@ interface Props {
   // globally from the band-map tab toolbar.
   hideDigital?: boolean;
   fitToBand?: boolean;
+  // keyNav enables Ctrl+↑ / Ctrl+↓ to hop to the next spot above / below the rig
+  // frequency (and tune to it). Only the docked Main-view band map sets this, so
+  // the multi-band Band Map tab (several maps) doesn't fight over the shortcut.
+  keyNav?: boolean;
 }
 
 const BAND_RANGES: Record<string, [number, number]> = {
@@ -153,7 +157,7 @@ const BOT_PAD = 14;    // the top-most freq label isn't clipped at y=0
 // last; ties broken by closeness to the rig freq).
 const MAX_VISIBLE_SPOTS = 30;
 
-export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, onClose, side = 'right', onToggleSide, hideDigital = false, fitToBand = false }: Props) {
+export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, onClose, side = 'right', onToggleSide, hideDigital = false, fitToBand = false, keyNav = false }: Props) {
   const { t } = useI18n();
   const range = BAND_RANGES[band];
   const segments = SEGMENT_COLORS[band] ?? [];
@@ -362,6 +366,38 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
     scrollerRef.current.scrollTop = Math.max(0, y - containerH / 2);
   }
 
+  // Ctrl+↑ / Ctrl+↓ hop to the next spot above / below the rig frequency and tune
+  // to it. Higher freq is UP on the map (see freqToY), so ↑ = next higher spot.
+  // Only active on the docked Main-view map (keyNav) and ignored while typing.
+  useEffect(() => {
+    if (!keyNav) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (!e.ctrlKey || e.altKey || e.metaKey) return;
+      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+      const ae = document.activeElement as HTMLElement | null;
+      const tag = (ae?.tagName || '').toLowerCase();
+      if (tag === 'input' || tag === 'textarea' || tag === 'select' || ae?.isContentEditable) return;
+      const list = spots
+        .filter((s) => (s.band ?? '') === band && s.freq_hz > 0)
+        .slice()
+        .sort((a, b) => a.freq_hz - b.freq_hz);
+      if (!list.length) return;
+      const cur = currentFreqHz || (lo + hi) * 500; // mid-band kHz→Hz when no rig freq
+      const EPS = 50; // Hz, so we don't re-pick the spot we're already sitting on
+      let target: Spot | undefined;
+      if (e.key === 'ArrowUp') {
+        target = list.find((s) => s.freq_hz > cur + EPS);
+      } else {
+        for (let i = list.length - 1; i >= 0; i--) { if (list[i].freq_hz < cur - EPS) { target = list[i]; break; } }
+      }
+      if (!target) return;
+      e.preventDefault();
+      onSpotClick(target);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [keyNav, spots, band, currentFreqHz, lo, hi, onSpotClick]);
+
   const currentKHz = currentFreqHz ? currentFreqHz / 1000 : 0;
   const showRigPointer = currentKHz >= lo && currentKHz <= hi;
   const rigY = freqToY(currentKHz);

frontend/src/components/DetailsPanel.tsx

@@ -306,11 +306,11 @@ export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, detai
             heightClass="flex-1 min-h-0"
           />
           {detected.length > 0 && (
-            <div className="mt-2 text-[11px] text-muted-foreground shrink-0">
+            <div className="mt-2 text-[11px] text-muted-foreground shrink-0 max-h-14 overflow-y-auto leading-snug border-t border-border/50 pt-1.5">
               <span className="font-medium text-foreground/70">{t('detp.detected')}</span>{' '}
               {detected.map((r) => (
-                <span key={`${r.code}@${r.ref}`} className="inline-block mr-2 font-mono">
-                  {r.code}{r.ref ? `@${r.ref}` : ''}{r.name ? <span className="text-muted-foreground/70"> {r.name}</span> : null}
+                <span key={`${r.code}@${r.ref}`} className="inline-block mr-1.5 font-mono whitespace-nowrap" title={r.name ?? ''}>
+                  <span className="text-foreground/80">{r.code}{r.ref ? `@${r.ref}` : ''}</span>
                 </span>
               ))}
             </div>

frontend/src/components/ExportFieldsDialog.tsx

@@ -12,6 +12,34 @@ import { adif } from '@/../wailsjs/go/models';
 type FieldDef = adif.FieldDef;
 const PREF_KEY = 'opslog.exportFields';
 
+// One category card with its checkboxes + All/None. Defined at MODULE scope (not
+// inside ExportFieldsDialog) so its component identity is stable across renders —
+// an inner component is re-created every render, remounting the whole subtree and
+// making the All/None buttons and checkboxes feel dead.
+function GroupCard({ title, tags, warn, sel, allLabel, noneLabel, onAll, onNone, onToggle }: {
+  title: string; tags: string[]; warn?: boolean; sel: Set<string>;
+  allLabel: string; noneLabel: string;
+  onAll: (tags: string[]) => void; onNone: (tags: string[]) => void; onToggle: (name: string, on: boolean) => void;
+}) {
+  return (
+    <div className={`rounded-md border p-2 ${warn ? 'border-warning-border/50 bg-warning-muted/20' : 'border-border/60'}`}>
+      <div className="flex items-center justify-between mb-1 gap-2">
+        <span className={`text-[11px] font-semibold uppercase tracking-wide ${warn ? 'text-warning-muted-foreground' : 'text-muted-foreground'}`}>{title}</span>
+        <span className="flex gap-1.5 shrink-0">
+          <button type="button" className="text-[10px] text-primary hover:underline" onClick={() => onAll(tags)}>{allLabel}</button>
+          <button type="button" className="text-[10px] text-muted-foreground hover:underline" onClick={() => onNone(tags)}>{noneLabel}</button>
+        </span>
+      </div>
+      {tags.map((name) => (
+        <label key={name} className="flex items-center gap-1.5 text-[11px] cursor-pointer py-0.5">
+          <Checkbox checked={sel.has(name)} onCheckedChange={(c) => onToggle(name, !!c)} />
+          <span className="font-mono break-all">{name}</span>
+        </label>
+      ))}
+    </div>
+  );
+}
+
 // ExportFieldsDialog lets the operator pick exactly which ADIF fields an export
 // writes. Two groups: the official ADIF 3.1.7 dictionary (grouped by category)
 // and the OpsLog / non-standard tags actually present in the log's extras. The
@@ -69,23 +97,14 @@ export function ExportFieldsDialog({ open, count, onExport, onClose }: {
     onExport(fields);
   };
 
-  const GroupCard = ({ title, tags, warn }: { title: string; tags: string[]; warn?: boolean }) => (
-    <div className={`rounded-md border p-2 ${warn ? 'border-warning-border/50 bg-warning-muted/20' : 'border-border/60'}`}>
-      <div className="flex items-center justify-between mb-1 gap-2">
-        <span className={`text-[11px] font-semibold uppercase tracking-wide ${warn ? 'text-warning-muted-foreground' : 'text-muted-foreground'}`}>{title}</span>
-        <span className="flex gap-1.5 shrink-0">
-          <button type="button" className="text-[10px] text-primary hover:underline" onClick={() => setMany(tags, true)}>{t('exf.all')}</button>
-          <button type="button" className="text-[10px] text-muted-foreground hover:underline" onClick={() => setMany(tags, false)}>{t('exf.none')}</button>
-        </span>
-      </div>
-      {tags.map((name) => (
-        <label key={name} className="flex items-center gap-1.5 text-[11px] cursor-pointer py-0.5">
-          <Checkbox checked={sel.has(name)} onCheckedChange={(c) => toggle(name, !!c)} />
-          <span className="font-mono break-all">{name}</span>
-        </label>
-      ))}
-    </div>
-  );
+  const allLabel = t('exf.all');
+  const noneLabel = t('exf.none');
+  const cardProps = {
+    sel, allLabel, noneLabel,
+    onAll: (tags: string[]) => setMany(tags, true),
+    onNone: (tags: string[]) => setMany(tags, false),
+    onToggle: toggle,
+  };
 
   return (
     <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
@@ -104,9 +123,9 @@ export function ExportFieldsDialog({ open, count, onExport, onClose }: {
 
         <div className="grid grid-cols-3 gap-3 max-h-[56vh] overflow-y-auto pr-1">
           {/* OpsLog / non-standard group first (most relevant to keep or drop). */}
-          {extras.length > 0 && <GroupCard title={t('exf.opslogGroup')} tags={extras} warn />}
+          {extras.length > 0 && <GroupCard title={t('exf.opslogGroup')} tags={extras} warn {...cardProps} />}
           {groups.map(([g, list]) => (
-            <GroupCard key={g} title={g} tags={list.map((d) => d.name)} />
+            <GroupCard key={g} title={g} tags={list.map((d) => d.name)} {...cardProps} />
           ))}
         </div>
 

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