refactor!: rewrite master-detail-layout with CSS grid#11361
Merged
web-padawan merged 38 commits intomainfrom Mar 18, 2026
Merged
refactor!: rewrite master-detail-layout with CSS grid#11361web-padawan merged 38 commits intomainfrom
web-padawan merged 38 commits intomainfrom
Conversation
BREAKING CHANGE: Replace flexbox layout with CSS grid. Remove properties: masterMinSize, detailMinSize, forceOverlay, stackOverlay, containment. Add properties: detailOverlayMode, expand. Remove [drawer]/[stack] attributes, use [has-detail][overflow] with [detail-overlay-mode] instead. Co-Authored-By: Sergey Vinogradov <mr.vursen@gmail.com> Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
web-padawan
force-pushed
the
feat/mdl-2.0
branch
from
895b2e8 to
5efe928
Compare
…write in rAF Move DOM/style reads to the synchronous ResizeObserver callback where layout is already calculated, and defer writes to requestAnimationFrame. This eliminates the Debouncer, __scheduleResize, and queueMicrotask batching in favor of the natural read/write separation. Property observers no longer manually schedule resizes since ResizeObserver picks up size changes from CSS custom property updates automatically. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Round the sum of computed grid track sizes before comparing with offsetWidth to avoid false overflow when the host has a fractional width (offsetWidth returns an integer while track sizes are sub-pixel). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use :scope > selector in querySelectorAll to prevent observing nested descendants, which caused unnecessary __onResize calls. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The [has-detail] attribute check is unnecessary in overlay selectors since the overlay state already implies a detail is present. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Call __onResize(true) in _finishTransition() before resolving the update callback. Without this, the browser takes the "new" snapshot before has-detail/overflow are set, causing the backdrop to flash in after the transition instead of being part of it. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add fallback values (1fr/0/min-content) for var(--_master-size) and var(--_detail-size) so grid template stays valid without explicit sizes - Require [has-master-size] on preserve-master-width rule to prevent master width jump when masterSize is not set - Require [has-detail] on view-transition-name selectors to avoid capturing 0-sized detail in the old transition snapshot - Fix split-mode border to only show when detail is present Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
web-padawan
force-pushed
the
feat/mdl-2.0
branch
3 times, most recently
from
2e84271 to
0cb787c
Compare
- __onResize(): remove sync parameter, always run synchronously. Sets has-detail before reading overflow so --_detail-column reflects correct state. ResizeObserver defers via Debouncer(rAF). - _finishTransition(): use queueMicrotask instead of sync call. Microtask runs before Promise resolution propagates to startViewTransition, ensuring correct snapshot. - CSS: collapse detail column to 0 when has-detail absent. - Test helper: extra nextRender for rAF-deferred __onResize. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
web-padawan
force-pushed
the
feat/mdl-2.0
branch
from
0cb787c to
c211ee6
Compare
web-padawan
force-pushed
the
feat/mdl-2.0
branch
from
31d3138 to
39ad639
Compare
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ounding issues Replace offsetWidth/offsetHeight with getComputedStyle().width/height for the host size comparison and use Math.floor instead of Math.round, since offsetWidth rounds fractional sizes to integers which can mask real overflow (e.g. 599.6px rounds up to 600, matching a 300+300 track sum). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…umn template Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ment
Simplify the overlay API by splitting the combined detailOverlayMode
property into two independent properties: overlaySize (CSS length for
the overlay panel) and overlayContainment ('layout'/'viewport').
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…perty Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…anch Also restore orientation JSDoc from main to reduce PR diff. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The test duplicated the existing overlay role="dialog" assertion since overlaySize does not affect ARIA behavior. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove duplicate fixed positioning and backdrop tests from the combined overlaySize + overlayContainment section. Use forEach over orientations to reduce boilerplate. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Set default --_master-size (30em) and --_detail-size (15em) in :host instead of using fallback values, removing the need for has-*-size attributes in CSS selectors. Update ARCHITECTURE.md and DOM snapshots. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix unit typo (rem -> em) and use same wording as .js file. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix Math.round -> Math.floor in overflow detection description. Add missing expand='master' selector in preserve-master-width example. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When expand='detail' and no detail content is present, the detail grid tracks would still reserve space, shrinking the master area. Apply the same calc(100% - masterSize) compensation used for expand='both' and expand='master' to push the empty detail tracks off-screen. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
vursen
approved these changes
Mar 18, 2026
This was referenced Mar 18, 2026
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
2 participants
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.
Summary
Fixes #11343
Part of #11345
Part of #11346
Part of #11347
masterMinSize,detailMinSize,forceOverlay,stackOverlaycontainmentproperty tooverlayContainment, addedoverlaySize[drawer]/[stack]attributes, use[has-detail][overflow]insteadARCHITECTURE.mdwith design documentationTest plan
yarn test --group master-detail-layout(74 unit tests pass)yarn test:snapshots --group master-detail-layout(5 snapshot tests pass)yarn update:base --group master-detail-layout(regenerate base screenshots)yarn update:lumo --group master-detail-layout(regenerate Lumo screenshots)yarn update:aura --group master-detail-layout(regenerate Aura screenshots)yarn start→ dev/master-detail-layout.html🤖 Generated with Claude Code