chore: release v0.21.3

frontend/src/components/StationControlPanel.tsx

@@ -415,7 +415,11 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
     );
   };
 
-  const widgets: { id: string; node: React.ReactNode }[] = [];
+  // `wide` cards span the whole dashboard instead of sitting in one masonry
+  // column. The amplifier and tuner carry meter rows and a channel selector that
+  // are unreadable squeezed into a ~430px column — they are the same cards the
+  // FlexRadio panel shows full-width, and they need that room here too.
+  const widgets: { id: string; node: React.ReactNode; wide?: boolean }[] = [];
   if (rot.enabled) {
     widgets.push({ id: 'rotator', node: <RotatorWidget hd={rot} refetch={pollRot} centerLat={centerLat} centerLon={centerLon} bearing={bearing} t={t} /> });
   }
@@ -423,9 +427,9 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
     widgets.push({ id: 'antenna', node: <MotorAntennaWidget ant={ant} refetch={pollAnt} t={t} /> });
   }
   // One card per configured amplifier (identical to the Flex panel's card).
-  for (const amp of amps) widgets.push({ id: `amp:${amp.id}`, node: <AmpCard amp={amp} flex={flexState} t={t} /> });
+  for (const amp of amps) widgets.push({ id: `amp:${amp.id}`, node: <AmpCard amp={amp} flex={flexState} t={t} />, wide: true });
   // Tuner Genius XL card (identical to the Flex panel's).
-  if (tgEnabled) widgets.push({ id: 'tuner', node: <TunerCard status={tg} t={t} /> });
+  if (tgEnabled) widgets.push({ id: 'tuner', node: <TunerCard status={tg} t={t} />, wide: true });
   for (const dev of devices) widgets.push({ id: dev.id, node: deviceCard(dev) });
 
   const rank = (id: string) => { const i = order.indexOf(id); return i < 0 ? 1e6 : i; };
@@ -470,7 +474,12 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
       <div style={{ columnWidth: '430px', columnGap: '1rem', columnFill: 'balance',
         ...(cols !== 'auto' ? { maxWidth: `${Number(cols) * 446}px` } : {}) }}>
         {ordered.map((w) => (
+          // column-span:all lifts a wide card out of the columns and across the
+          // full container, while keeping it in document order — so drag-reorder
+          // still works between wide and normal cards. Capped so it stays a card
+          // and not a banner on an ultra-wide window.
           <div key={w.id} className="flex items-stretch break-inside-avoid mb-4"
+            style={w.wide ? { columnSpan: 'all', maxWidth: '900px' } : undefined}
             onDragOver={(e) => { if (dragId.current) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; } }}
             onDrop={(e) => { if (dragId.current) { e.preventDefault(); onDrop(w.id); } }}>
             <div draggable