clip the content region instead of hiding its overflow

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>
2026-07-30 07:08:40 +00:00
parent f5d30245c1
commit 9b9012d23d
1 changed files with 6 additions and 1 deletions
@@ -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>