Fix ListDetailLayout horizontal overflow into the detail pane#15
Merged
Conversation
A too-wide child in `ListDetailLayout.List` — e.g. an auto-layout `<table>` that won't shrink below its content — spilled out of the fixed-width list rail and painted over the detail pane. Clip horizontal overflow (`overflow: hidden auto`) and set `minWidth: 0` on the side-by-side rail so an oversized child scrolls/clips within the rail instead of overlapping it. Surfaced dogfooding the People CRM, whose list rendered a 3-column table inside the 320px rail. Prefer `ListRow` for master lists; reserve `Table` for full-width surfaces. Bump 0.10.0 -> 0.10.1.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
ListDetailLayout.Listis a fixed-width (listWidth, default 320),flexShrink:0master rail that scrolled vertically but did not clip horizontally. A child wider than the rail — most commonly an auto-layout<table>that won't shrink below its intrinsic content width — spilled out of the rail and painted over the detail pane.Fix
In
ListDetailLayout.List:overflowY: "auto"→overflow: "hidden auto"(clip X, scroll Y).minWidth: 0to the side-by-side rail branch.So an oversized child now scrolls/clips within the rail instead of overlapping the detail. Guidance unchanged: use
ListRowfor master lists; reserveTablefor full-width surfaces.Why
Surfaced dogfooding the People CRM, whose list rendered a 3-column
Tableinside the 320px rail and overlapped the detail panel.Verification
npm run cipasses — lint, typecheck, build, 381 tests.Version bumped
0.10.0 → 0.10.1; CHANGELOG updated.