fix(ui): stop Preferences redrawing with the main window; unclip the dropdowns

TWO FAULTS, ONE SYMPTOM — 'it refreshes ten times a second and the
buttons cannot be pressed'.

Preferences is a child of the main view, so every cluster spot, CAT push
and decode re-rendered the entire panel. On a busy evening that is
several times a second, and the panel is large enough that the rebuild
outlasts the gap between them: buttons missed their clicks because the
element under the pointer was replaced between the press and the release.
It is memoised now, and the callbacks App hands it hold their identity —
without that the memo compares unequal every time and buys nothing.

The dropdown menu was an absolutely-positioned child, so it was clipped
by whichever scrolling or overflow-hidden box it sat in: the satellite
list showed one entry of eight. It is portalled to the body now,
positioned from the field's rectangle, re-measured while open, and opens
upward when the field is near the bottom of the screen — which is exactly
where these fields tend to be.

frontend/src/App.tsx

@@ -4194,6 +4194,41 @@ export default function App() {
     setLookupResult(null);
   }
 
+  // The Settings dialog is memoised (see SettingsModal), which only helps while
+  // its props hold still. These three would otherwise be new functions on every
+  // App render — several times a second with a cluster running — and the memo
+  // would compare unequal every time and re-render the whole panel anyway.
+  const openEditRef = useRef<(id: number) => void>(() => {});
+  // Refreshed on every render, read only when Settings opens: the dialog gets a
+  // callback whose identity never changes, and still calls the current one.
+  useEffect(() => { openEditRef.current = (id: number) => { void openEdit(id); }; });
+  // The stable wrapper the dialog actually receives.
+  const openQSOFromSettings = useCallback((id: number) => openEditRef.current(id), []);
+  const closeSettings = useCallback(() => {
+    setShowSettings(false);
+    setSettingsSection(undefined);
+    refreshChaseNew();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onSettingsSaved = useCallback(() => {
+    loadStation(); loadLists(); loadCATCfg(); reloadWk(); refreshManualRecReady();
+    // Drop the cached spot statuses. They are computed once per call+band+mode
+    // and never expire, so a rule change in Settings — grouping the digital
+    // modes into one slot, above all — left every spot already on screen
+    // showing the answer to the OLD question.
+    setSpotStatus({});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onSettingsPaneChanged = useCallback((side: 'left' | 'right' | 'p3' | 'p4' | 'layout', v: string) => {
+    // Applied from the CHOSEN value, never from a re-read of the DB: the write
+    // is async and the layout must not lag a click behind.
+    if (side === 'left') setMainPaneLeft(v as MainPaneKind);
+    else if (side === 'right') setMainPaneRight(v as MainPaneKind);
+    else if (side === 'p3') setMainPane3(v as MainPaneKind);
+    else if (side === 'p4') setMainPane4(v as MainPaneKind);
+    else if (side === 'layout') setMainLayout4(v === 'cols' ? 'cols' : 'quad');
+  }, []);
+
   async function openEdit(id: number) {
     try { setEditingQSO(await GetQSO(id)); }
     catch (e: any) { setError(String(e?.message ?? e)); }
@@ -8495,26 +8530,11 @@ export default function App() {
 
       {showSettings && (
         <SettingsModal
-          onEditQSO={openEdit}
+          onEditQSO={openQSOFromSettings}
           initialSection={settingsSection}
-          onClose={() => { setShowSettings(false); setSettingsSection(undefined); refreshChaseNew(); }}
-          onSaved={() => {
-            loadStation(); loadLists(); loadCATCfg(); reloadWk(); refreshManualRecReady();
-            // Drop the cached spot statuses. They are computed once per
-            // call+band+mode and never expire, so a rule change in Settings —
-            // grouping the digital modes into one slot, above all — left every
-            // spot already on screen showing the answer to the OLD question.
-            setSpotStatus({});
-          }}
-          onMainPaneChanged={(side, v) => {
-            // Applied from the CHOSEN value, never from a re-read of the DB:
-            // the write is async and the layout must not lag a click behind.
-            if (side === 'left') setMainPaneLeft(v as MainPaneKind);
-            else if (side === 'right') setMainPaneRight(v as MainPaneKind);
-            else if (side === 'p3') setMainPane3(v as MainPaneKind);
-            else if (side === 'p4') setMainPane4(v as MainPaneKind);
-            else if (side === 'layout') setMainLayout4(v === 'cols' ? 'cols' : 'quad');
-          }}
+          onClose={closeSettings}
+          onSaved={onSettingsSaved}
+          onMainPaneChanged={onSettingsPaneChanged}
           flexAvailable={catState.backend === 'flex'}
           icomAvailable={catState.backend === 'icom'}
           yaesuAvailable={catState.backend === 'yaesu'}