From b280253033eb22fe1841f0e66264c784f1b2b610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 16:29:52 +0200
Subject: [PATCH] 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.
---
 src/components/admin/admin-shell.tsx       | 8 ++++++--
 src/components/settings/settings-shell.tsx | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/admin/admin-shell.tsx b/src/components/admin/admin-shell.tsx
index f6e68ef50..14fedfd0c 100644
--- a/src/components/admin/admin-shell.tsx
+++ b/src/components/admin/admin-shell.tsx
@@ -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>
   );
diff --git a/src/components/settings/settings-shell.tsx b/src/components/settings/settings-shell.tsx
index 410d2379c..30ae48d53 100644
--- a/src/components/settings/settings-shell.tsx
+++ b/src/components/settings/settings-shell.tsx
@@ -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>
   );