peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(settings): size panel to the active tab + drop the native unload prompt

Browse source 
- Render only the active settings tab instead of stacking all four in one grid
  cell. The stack forced the whole panel to the tallest tab's (Account) height,
  leaving the short tabs (Appearance/Notifications) with dead space and a
  pointless scrollbar. Now the panel sizes to its actual content.
- Remove the beforeunload guard: it could only raise the browser's own native
  'Reload site?' prompt (no in-app dialog possible there), which we avoid.
  Unsaved prefs are local-only and revert to the saved server baseline on the
  next load, so a reload/close loses nothing. The in-app confirm still guards
  in-app navigation and browser Back.
This commit is contained in:
npeter83 2026-06-19 00:04:19 +02:00
parent 53ba10e7c6
commit 2e79074fca
2 changed files with 11 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/components/SettingsPanel.tsx
View file

@ -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>