mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
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:
1 parent
d567e45423
commit
b280253033
2 files changed
+12
-4
No files matched your search
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user