Merge improvement/settings-panel-trim: tidy Settings height, drop native unload prompt

frontend/src/App.tsx

@@ -374,17 +374,9 @@ export default function App() {
     confirmRef.current = confirm;
     pageRef.current = page;
   });
-
-  // Warn on a hard navigation (reload / tab close) while preference changes are unsaved.
-  useEffect(() => {
-    if (!prefsDirty) return;
-    const handler = (e: BeforeUnloadEvent) => {
-      e.preventDefault();
-      e.returnValue = "";
-    };
-    window.addEventListener("beforeunload", handler);
-    return () => window.removeEventListener("beforeunload", handler);
-  }, [prefsDirty]);
+  // No beforeunload guard: a reload/close can only raise the browser's own native prompt
+  // (we can't show our in-app confirm there), and unsaved prefs are local-only — they
+  // revert to the saved server baseline on the next load — so there's nothing to lose.
 
   if (meQuery.isLoading)
     return (

frontend/src/components/SettingsPanel.tsx

@@ -92,22 +92,14 @@ export default function SettingsPanel({
             })}
           </nav>
 
-          {/* All tabs stacked in one grid cell so the panel sizes to the tallest tab
-              (stable height, no jump on switch); the active one is shown on top. */}
-          <div className="grid flex-1 min-w-0">
-            {TABS.map((tabItem) => (
-              <div
-                key={tabItem.id}
-                className={`[grid-area:1/1] p-4 ${
-                  tab === tabItem.id ? "" : "invisible pointer-events-none"
-                }`}
-              >
-                {tabItem.id === "appearance" && <Appearance prefs={prefs} />}
-                {tabItem.id === "notifications" && <Notifications prefs={prefs} />}
-                {tabItem.id === "sync" && <Sync me={me} />}
-                {tabItem.id === "account" && <Account me={me} onOpenWizard={onOpenWizard} />}
-              </div>
-            ))}
+          {/* Render only the active tab so the panel sizes to its actual content. (Stacking
+              every tab in one grid cell made the whole panel as tall as the tallest tab —
+              Account — leaving the short tabs with dead space and a needless scrollbar.) */}
+          <div className="flex-1 min-w-0 p-4">
+            {tab === "appearance" && <Appearance prefs={prefs} />}
+            {tab === "notifications" && <Notifications prefs={prefs} />}
+            {tab === "sync" && <Sync me={me} />}
+            {tab === "account" && <Account me={me} onOpenWizard={onOpenWizard} />}
           </div>
         </div>