From 9b9012d23da5c4316ae5930e59498f56f546c058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Thu, 30 Jul 2026 07:08:40 +0000
Subject: [PATCH] clip the content region instead of hiding its overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking any link shifted the whole app up by ~70px: the top of the content slid behind
the fixed header, and the nav dock — which should stay hidden until you reach for it —
appeared at the bottom. It survived navigation and only a full reload cleared it.

`overflow-hidden` still makes an element a scroll container; it only hides the scrollbar.
The nav Dock is absolute inside this section and hides itself with
translateY(calc(100% + 24px)), and a transformed descendant contributes its transformed
box to the scrollable overflow area — so the section had ~70px of scrollable range it was
never meant to have. Clicking a link moves focus, the browser scrolls the nearest scroll
container to reveal the focused element, and everything inside (all of it absolute
inset-0) went up with it, the parked dock included.

overflow-clip clips identically but does not create a scroll container, so there is
nothing for focus-into-view to scroll.

Diagnosed from the running app rather than by reading: the section reported
scrollTop=70 at the moment the layout was wrong, matching the 70px the content and the
music bar had moved, while innerHeight/visualViewport stayed at 556 (ruling out the
dvh/URL-bar theory) and the outer div's scrollHeight equalled its clientHeight (ruling
out the shell). Confirmed fixed in the browser.

The outer div at :21 is also overflow-hidden and is left alone — it has no scrollable
overflow, so it cannot exhibit this.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../Screens/Dashboard/Layout/DashboardLayout.tsx           | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx b/src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx
index 150cda6e..49eccf24 100644
--- a/src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx
@@ -20,7 +20,12 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
   return (
     <div className="relative flex h-dvh flex-col overflow-hidden outline-none inset-0">
       <Header dockItems={visibleItems} />
-      <section ref={regionRef} className="relative min-h-0 flex-1 snap-start overflow-hidden">
+      {/* overflow-CLIP, not hidden: `hidden` still makes this a scroll container, and the nav Dock —
+          absolute, parked below the bottom edge by translateY while hidden — adds its transformed box to
+          the scrollable overflow. So clicking a link let the browser scroll this section ~70px to reveal
+          the focused element: content slid up under the fixed header and the hidden dock slid into view.
+          `clip` clips identically but is not scrollable, so nothing can ever scroll it. */}
+      <section ref={regionRef} className="relative min-h-0 flex-1 snap-start overflow-clip">
         <Background />
         {!isTouch && <Dock items={visibleItems} boundaryRef={regionRef} className="hidden md:flex" />}
         <div className="absolute inset-0 z-2 pt-[52px] md:pt-[64px] pb-2 overflow-y-auto">{children}</div>