From d58116e3ffe7f1e44ca28e8a31066b6813cc014d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 27 Jun 2026 12:46:15 +0200
Subject: [PATCH] fix(settings): pin the settings and admin sidebars on scroll

The desktop section nav in both shells used a single sticky wrapper at
top-20. Because the nav can run taller than the scroll viewport and the
top offset assumed a topbar that sits outside the scroll region, the
panel drifted with the content and re-pinned abruptly on scroll-up.

Cap the wrapper height to the viewport and let it scroll independently
(top-6, max-h-[calc(100dvh-5.5rem)], overflow-y-auto, no-scrollbar) so
the nav stays pinned. Covers every /settings/* and /admin/* page through
the shared shells.
---
 src/components/admin/admin-shell.tsx       | 2 +-
 src/components/settings/settings-shell.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/admin/admin-shell.tsx b/src/components/admin/admin-shell.tsx
index f0bd0209c..39f94bb37 100644
--- a/src/components/admin/admin-shell.tsx
+++ b/src/components/admin/admin-shell.tsx
@@ -316,7 +316,7 @@ export function AdminShell({ active, children }: AdminShellProps) {
           aria-label={t("admin.shell.sectionsNav")}
           className="hidden md:col-start-1 md:row-start-2 md:block"
         >
-          <div className="sticky top-20">
+          <div className="no-scrollbar sticky top-6 max-h-[calc(100dvh-5.5rem)] overflow-y-auto">
             <ul className="space-y-1">
               <li>
                 <Link
diff --git a/src/components/settings/settings-shell.tsx b/src/components/settings/settings-shell.tsx
index d9397a3ac..e091cfc9c 100644
--- a/src/components/settings/settings-shell.tsx
+++ b/src/components/settings/settings-shell.tsx
@@ -502,7 +502,7 @@ export function SettingsShell({
           aria-label={t("settings.shell.sectionsNav")}
           className="hidden md:col-start-1 md:row-start-2 md:block"
         >
-          <div className="sticky top-20">
+          <div className="no-scrollbar sticky top-6 max-h-[calc(100dvh-5.5rem)] overflow-y-auto">
             <ul className="space-y-1">
               {visibleSections.map((section) => {
                 const isActive = section.slug === activeSlug;