Overview: Space no longer scrolls the window into blank space

[fylorn]

Problem

On the Overview, with the charts shown, pressing Space a few times slid the whole right column (toolbar included) up and left about half a window of blank space below it.

Root cause

Every page scrolls in its own layer in src/shell/Pages.tsx (the motion-page div with overflow-y-auto). That layer was not positioned. An absolutely positioned element with no positioned ancestor takes the window (the initial containing block) as its containing block, and a scroll container only clips and carries the absolutely positioned elements whose containing block is the container itself or inside it. So such elements kept their place in the flow below the bottom of the window, unclipped, and made the document taller than the window.

On the Overview these are the screen-reader hints after each breakdown row (<span className="sr-only"> in src/overview/parts.tsx, "View in Traffic" / "View in the security log"). Before the data arrives the document is 720 px tall; once the charts and rows render it grows to about 1,600 px in a 1100×720 window (Chromium: 1,622; WKWebView: 1,614). The lowest hint, in the security section, sets the height.

Two ways Space then reached the document:

• with nothing focused, Space scrolls the document, because it was the only scroll container that could scroll;
• after a click into the page, Space scrolls the page layer to its end and then chains on into the document.

The layer already was a containing block for the 250 ms of the page-enter animation (its transform), and stopped being one when the animation ended.

Fix

The page layer is now relative, so it is the containing block for those elements on every page (all pages share this layer). The document is no longer taller than the window on any page.

I considered also setting overflow: hidden on the document, but did not do it. It would not stop programmatic scrolls such as scrollIntoView, and the update and connection-picker windows use the same stylesheet and fit their height to their content, so the rule would have to be limited to the main window. With nothing overflowing, the document has nothing to scroll.

Verification

Harness: .claude/preview/full, page=dashboard&platform=macos, window 1100×720.

• Chromium (Playwright, real keyboard.press)
  • Before the fix:
    • document scrollHeight 1622 against innerHeight 720.
    • Space with focus on <body> scrolled the document by 680, then to 902.
    • After a click into the page, Space/PageDown scrolled the layer to its end (947) and then the document (680 → 902).
  • After the fix:
    • document scrollHeight is 720 and scrollTop stays 0 under Space ×6 (focus on body, after a click into the page, after hovering a chart) and under PageDown/ArrowDown/End/Home.
    • The layer scrolls to exactly its end (947) and back with Home.
  • Every page (dashboard, requests, clients, keys, upstreams, routing, security, mcp, plugins, settings, request drawer, notices) has a document no taller than the window. This holds at 1100×720 and at the minimum 820×560, also after hovering, while loading (slow) and with empty.
  • A detector for absolutely positioned elements that escape their nearest scroll container finds none on any page.
  • Pixel comparison of every page, at the top and scrolled to the bottom, with and without the fix: the only differences are in the live trend chart, and they also appear between two runs with the fix.
• WKWebView (offscreen, real NSEvent key presses: Space 49, PageDown, arrows, End, Home)
  • With the layer forced back to static, the bug reproduces:
    • document 1614 px tall, 6 elements escape the layer.
    • Space with focus on body scrolled the document to 894.
    • End plus ArrowDown at the end of the layer chained into the document.
  • With the fix:
    • document max scroll is 0 on every page (also after a hover over the chart). Nothing escapes the layer.
    • The document never moved under any key sequence.
    • Space, PageDown and End scroll the layer to exactly its end (939 on Overview, 1779 on Settings).
  • Keyboard scroll animations in an offscreen web view settle late and erratically: a value often shows only after the next key. The fixed and reverted runs behave the same within the layer, so I compared end states, not per-key timing.
• pnpm typecheck, pnpm test (96 files, 985 tests) and pnpm build pass locally.
  • New src/shell/Pages.test.tsx renders the content area for every page, linked and not, and checks that the layer is relative. It fails without the fix.

Not changed: with nothing focused and no click into the page, Space now does nothing; before, it scrolled the document into blank space. It does not scroll the page layer, the same as pages that never overflowed.

🤖 Generated with Claude Code