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;
   });
-
+  // No beforeunload guard: a reload/close can only raise the browser's own native prompt
-  // Warn on a hard navigation (reload / tab close) while preference changes are unsaved.
+  // (we can't show our in-app confirm there), and unsaved prefs are local-only — they
-  useEffect(() => {
+  // revert to the saved server baseline on the next load — so there's nothing to lose.
-    if (!prefsDirty) return;
-    const handler = (e: BeforeUnloadEvent) => {
-      e.preventDefault();
-      e.returnValue = "";
-    };
-    window.addEventListener("beforeunload", handler);
-    return () => window.removeEventListener("beforeunload", handler);
-  }, [prefsDirty]);
 
   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
+          {/* Render only the active tab so the panel sizes to its actual content. (Stacking
-              (stable height, no jump on switch); the active one is shown on top. */}
+              every tab in one grid cell made the whole panel as tall as the tallest tab —
-          <div className="grid flex-1 min-w-0">
+              Account — leaving the short tabs with dead space and a needless scrollbar.) */}
-            {TABS.map((tabItem) => (
+          <div className="flex-1 min-w-0 p-4">
-              <div
+            {tab === "appearance" && <Appearance prefs={prefs} />}
-                key={tabItem.id}
+            {tab === "notifications" && <Notifications prefs={prefs} />}
-                className={`[grid-area:1/1] p-4 ${
+            {tab === "sync" && <Sync me={me} />}
-                  tab === tabItem.id ? "" : "invisible pointer-events-none"
+            {tab === "account" && <Account me={me} onOpenWizard={onOpenWizard} />}
-                }`}
-              >
-                {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>
-            ))}
           </div>
         </div>