From 94415e468ecb93d15cd9774c3eaca37655024f59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 2 Jun 2026 17:09:54 +0200
Subject: [PATCH] fix(layout): reserve the scrollbar gutter so the nav no
 longer shifts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The authenticated shell scrolls inside its own `<main>` (the body is height-
locked with `flex h-dvh`), and that `<main>` centres its content with
`mx-auto`. A tall section paints the vertical scrollbar and narrows the
content box; a short one hides it and widens the box, so the whole column —
including the admin/settings sidebar — recentres a few px sideways on every
view switch. The admin "Insights Quality" ↔ "Integrations" toggle was the
visible case.

Reserve the gutter with `scrollbar-gutter: stable` on the `<main>` scroll
viewport, and on `html` for the body-scrolled login / onboarding / standalone
pages. The content box width is now constant whether or not the bar is
painted, so the left nav no longer shifts when a scrollbar appears. The fix is
global: every signed-in route renders inside the same `<main>`, so the same
shift on settings, insights, and dashboard navigation is fixed at once. The
height-locked authenticated body never scrolls the document, so no double
gutter results.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
(cherry picked from commit c1459e5ee42b7f7acbfa933a9eb7d1f5a1c6890a)
---
 src/app/globals.css                  | 13 +++++++++++++
 src/components/layout/auth-shell.tsx | 11 ++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index a3e673edc..192ee4610 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -252,6 +252,19 @@
   * {
     @apply border-border outline-ring/50;
   }
+  /*
+   * Reserve the scrollbar gutter on the document root so the body-scrolled
+   * shells (login / register / onboarding / standalone legal pages) keep a
+   * fixed content width whether or not the page overflows. Without it a tall
+   * page paints the bar and a short one hides it, and any `mx-auto` content
+   * recentres a few px sideways on navigation. The authenticated app shell
+   * scrolls inside its own `<main>` (`flex h-dvh` locks the body height, so
+   * the document never scrolls there) and reserves its own gutter — no
+   * double gutter results.
+   */
+  html {
+    scrollbar-gutter: stable;
+  }
   body {
     @apply bg-background text-foreground;
   }
diff --git a/src/components/layout/auth-shell.tsx b/src/components/layout/auth-shell.tsx
index fb63cfbf0..e0c9e7aad 100644
--- a/src/components/layout/auth-shell.tsx
+++ b/src/components/layout/auth-shell.tsx
@@ -172,7 +172,16 @@ export function AuthShell({ children }: { children: React.ReactNode }) {
           <TopBar />
           <main
             id="main-content"
-            className="flex-1 overflow-y-auto pb-[calc(4rem+env(safe-area-inset-bottom,0px))] md:pb-0"
+            // `scrollbar-gutter: stable` keeps the scroll viewport's content
+            // box a fixed width whether or not the vertical scrollbar is
+            // painted. Without it a route / sub-tab whose body overflows
+            // (e.g. the admin "Insights Quality" section) shows the bar and
+            // narrows the content box, while a shorter one (e.g.
+            // "Integrations") hides it and widens the box — the `mx-auto`
+            // wrapper then recentres and the whole column, including the
+            // admin/settings sidebar, shifts a few px sideways on every
+            // toggle. Reserving the gutter holds the layout still.
+            className="flex-1 overflow-y-auto [scrollbar-gutter:stable] pb-[calc(4rem+env(safe-area-inset-bottom,0px))] md:pb-0"
           >
             {/*
               v1.4.33 IW9 — container normalised on `max-w-screen-xl`