fix: QTH field is wider to see the full city names

frontend/src/components/StationControlPanel.tsx

@@ -225,6 +225,7 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
     try { const v = JSON.parse(localStorage.getItem('opslog.stationOrder') || '[]'); return Array.isArray(v) ? v : []; } catch { return []; }
   });
   const dragId = useRef<string | null>(null);
+  const [cols, setCols] = useState<string>(() => localStorage.getItem('opslog.stationCols') || 'auto');
 
   const loadDevices = useCallback(async () => {
     try { setDevices(((await GetStationDevices()) ?? []) as Device[]); } catch { /* db not ready */ }
@@ -353,13 +354,32 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
 
   const noDevices = devices.length === 0 && !rot.enabled && !ant.enabled;
 
+  // Column count controls the layout: with 4 widgets, choosing "2" lays them out
+  // 2×2 — which linear drag-reorder alone can't do, since the grid auto-flows to
+  // fill however many columns are available.
+  const gridCols: Record<string, string> = {
+    auto: 'sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4',
+    '1': 'grid-cols-1', '2': 'grid-cols-2', '3': 'grid-cols-3', '4': 'grid-cols-4',
+  };
+
   return (
     <div className="flex-1 min-h-0 overflow-auto p-4">
       <div className="flex items-center justify-between mb-3">
         <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">{t('station.title')}</h2>
-        <Button size="sm" variant="outline" onClick={() => setEditing(blankDevice())}>
-          <Plus className="size-3.5 mr-1" /> {t('station.addDevice')}
-        </Button>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center rounded-md border border-border overflow-hidden text-[11px]">
+            {(['auto', '2', '3', '4'] as const).map((c) => (
+              <button key={c} type="button"
+                onClick={() => { setCols(c); writeUiPref('opslog.stationCols', c); }}
+                className={cn('px-2 py-1 font-medium', cols === c ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted')}>
+                {c === 'auto' ? t('station.colsAuto') : c}
+              </button>
+            ))}
+          </div>
+          <Button size="sm" variant="outline" onClick={() => setEditing(blankDevice())}>
+            <Plus className="size-3.5 mr-1" /> {t('station.addDevice')}
+          </Button>
+        </div>
       </div>
 
       {noDevices && !editing && (
@@ -368,7 +388,7 @@ export function StationControlPanel({ centerLat, centerLon, bearing }: RotatorPr
         </div>
       )}
 
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 items-start">
+      <div className={cn('grid gap-3 items-start', gridCols[cols] ?? gridCols.auto)}>
         {ordered.map((w) => (
           <div key={w.id} draggable
             onDragStart={(e) => { dragId.current = w.id; e.dataTransfer.effectAllowed = 'move'; }}