Skip to content

fix: stop Data Manager double-scrolling and double-padding inside Layout's main (#4145) - #4240

Merged
atomantic merged 1 commit into
mainfrom
claim/issue-4145
Aug 15, 2026
Merged

fix: stop Data Manager double-scrolling and double-padding inside Layout's main (#4145)#4240
atomantic merged 1 commit into
mainfrom
claim/issue-4145

Conversation

@atomantic

Copy link
Copy Markdown
Owner

Summary

/data (Data Manager) appeared in neither EXACT_FULL_WIDTH_PATHS nor FULL_WIDTH_PATH_PREFIXES, so Layout gave it the default overflow-auto p-4 md:p-6 <main>. The page itself is a flex flex-col h-full shell with its own bordered header bar over a flex-1 overflow-auto p-4 body — so the page's scroller nested inside <main>'s scroller, and both applied padding.

Chose option 1 from the issue (register the route as full-width) over option 2 (flatten the page into a normal scrolling page), because a sticky header bar over a scrolling body is exactly the shape the full-width branch exists for — the same shell as /tribe, /rapid-reader, /timeline, and /songbook, all of which are registered full-width.

One correction to the issue's phrasing of option 1: it suggested also dropping the page's h-full/overflow-auto wrapper "since <main> would now handle the scroll container". It would not. The full-width branch renders <main> as a bare relative overflow-hidden, and client/src/CLAUDE.md is explicit that a full-width page must own an internal overflow-y-auto or it clips below the fold. So the page's shell is kept as the single scroll container; what's removed is <main>'s competing one.

Registered as an exact path rather than a prefix: a /data prefix would also match the /datadog redirect route.

Changes:

  • client/src/components/Layout.jsx — add /data to EXACT_FULL_WIDTH_PATHS.
  • client/src/pages/DataManager.jsxmin-h-0 on the flex column and on the body, shrink-0 on the header bar, so a tall body scrolls rather than stretching the shell past <main>. This also makes the live shell byte-for-byte equivalent to what PageSkeleton reserves.
  • client/src/pages/DataManager.jsx — the PageSkeleton call's fullHeight / padded / barClassName="p-4" / bodyClassName="p-4" props are the correct set for the new shell and are unchanged; a comment now records why (its root is flex flex-col min-h-0 h-full, bar shrink-0 … p-4, body flex-1 min-h-0 overflow-y-auto p-4 — matching the loaded page exactly). Dropping them here would have reintroduced the mismatch in the other direction, since the full-width <main> supplies neither scroll nor padding.

Test plan

  • client/src/components/Layout.test.jsx — new Layout — Data Manager scroll mode integration case asserting /data renders the overflow-hidden main with no overflow-auto/p-4, while /devtools/datadog stays padded+scrolling; plus ['/data', true], ['/datadog', false], ['/devtools/datadog', false] rows in the isFullWidthRoute classification table.
  • client/src/pages/DataManager.test.jsx — new DataManager full-width shell (#4145) suite asserting the loaded page is a non-scrolling h-full column with exactly one direct-child scroll region (flex-1 min-h-0 overflow-auto p-4), that the header bar is shrink-0 and outside it, and that the loading skeleton reserves the same shape.
  • Bypass probe: commenting out the /data entry fails both new Layout assertions (2 failures), confirming the tests are not vacuous.
  • cd client && npm test — 640 files / 7766 tests passing.
  • cd client && npx biome lint --error-on-warnings on the four touched files — clean.

Closes #4145

…out's main (#4145)

/data was in neither EXACT_FULL_WIDTH_PATHS nor FULL_WIDTH_PATH_PREFIXES, so
Layout rendered it in the default 'overflow-auto p-4 md:p-6' main while the page
itself is a 'flex flex-col h-full' shell with its own bordered header bar over a
'flex-1 overflow-auto p-4' body — two nested scroll containers and two layers of
padding.

Registers /data in EXACT_FULL_WIDTH_PATHS (exact, not a prefix, so it can't
swallow the /datadog routes) and keeps the page's shell as the single scroll
container, which is what the full-width branch expects: its main is a bare
'relative overflow-hidden' that supplies neither scroll nor padding.
@atomantic
atomantic merged commit 1fcdc70 into main Aug 15, 2026
7 checks passed
@atomantic
atomantic deleted the claim/issue-4145 branch August 15, 2026 03:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Data Manager page double-scrolls/double-pads inside Layout's main

1 participant