fix(settings): reserve a minimum main-column height in the settings and admin shells

Adds `min-h-[calc(100dvh-12rem)]` to the `<main>` element in both
`<SettingsShell>` and `<AdminShell>`. The sticky 220 px sidebar is
anchored to the page scroll; previously the grid's row height tracked
the section's content height, so swapping a short spinner for a long
list (Thresholds: 14 rows; Sources: 14 metric tiles) jumped the page
height under the sidebar and shifted the active link off-screen. The
12 rem reserve covers the global header (5 rem) + section header
(~5 rem) + a small buffer, so the spinner-to-content transition no
longer changes the viewport height. Short pages (`/settings/about`)
still render short because `min-h` does not clamp tall content.
This commit is contained in:
Marc-André Bombeck committed 2026-05-15 16:29:52 +02:00
1 parent d567e45423
commit b280253033
2 files changed
+12 -4

No files matched your search

+6 -2
View File
@@ -263,8 +263,12 @@ export function AdminShell({ active, children }: AdminShellProps) {
</div>
</aside>
{/* Main column — page renders its own h1 + subtitle */}
<main className="min-w-0">{children}</main>
{/* Main column — page renders its own h1 + subtitle. Same
`min-h-[calc(100dvh-12rem)]` reserve as `<SettingsShell>`
so navigating between admin sub-pages (e.g. system-status
→ login-overview) does not jump the page height while the
new section is still fetching. */}
<main className="min-h-[calc(100dvh-12rem)] min-w-0">{children}</main>
</div>
</div>
);
+6 -2
View File
@@ -214,8 +214,12 @@ export function SettingsShell({ active, children }: SettingsShellProps) {
</div>
</aside>
{/* Main column — page renders its own h1 + subtitle */}
<main className="min-w-0">{children}</main>
{/* Main column — page renders its own h1 + subtitle. The
`min-h-[calc(100dvh-12rem)]` reserve keeps the column tall
enough that swapping a short loading state for a long
section list (Thresholds, Sources) does not jump the page
height under the sticky sidebar. */}
<main className="min-h-[calc(100dvh-12rem)] min-w-0">{children}</main>
</div>
</div>
);