feat: calculate detail size automatically when not explicity set#11403
Merged
feat: calculate detail size automatically when not explicity set#11403
Conversation
vursen
changed the title
vursen
force-pushed
the
mdl/detail-auto-size
branch
8 times, most recently
from
6a11248 to
b838998
Compare
web-padawan
reviewed
Mar 26, 2026
packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js
Outdated
Show resolved
Hide resolved
vursen
changed the title
vursen
force-pushed
the
mdl/detail-auto-size
branch
11 times, most recently
from
23219d5 to
7d3fe4d
Compare
web-padawan
reviewed
Mar 30, 2026
packages/master-detail-layout/test/master-detail-layout.test.js
Outdated
Show resolved
Hide resolved
packages/master-detail-layout/src/vaadin-master-detail-layout.js
Outdated
Show resolved
Hide resolved
packages/master-detail-layout/test/visual/base/master-detail-layout.test.js
Outdated
Show resolved
Hide resolved
This was referenced Mar 30, 2026
vursen
force-pushed
the
mdl/detail-auto-size
branch
from
bcb5932 to
21ed0fb
Compare
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>
…l sizing Wrapping recalculateLayout in queueMicrotask ensures Lit elements have completed their rendering before layout measurement occurs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
# Conflicts: # packages/master-detail-layout/ARCHITECTURE.md # packages/master-detail-layout/src/vaadin-master-detail-layout.js # packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js # packages/master-detail-layout/test/dom/master-detail-layout.test.js # packages/master-detail-layout/test/master-detail-layout.test.js
vursen
force-pushed
the
mdl/detail-auto-size
branch
from
7bcc0da to
2b8cfd2
Compare
1 task
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
web-padawan
reviewed
Mar 31, 2026
web-padawan
reviewed
Mar 31, 2026
packages/master-detail-layout/test/master-detail-layout.test.js
Outdated
Show resolved
Hide resolved
- __checkOverflow() → detectOverflow() (extracted to standalone helper) - --_master-column → --_master-extra in CSS snippets - display: none/block → visibility: hidden/visible for placeholder - Document fill: 'forwards' and async _finishTransition via microtask - Document backdrop fade (opacity + pointer-events, not display) - Document overflow: clip replacing overflow: hidden - Document stale rAF safety invariant - Update CSS resting state description (translate + visibility) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
web-padawan
approved these changes
Mar 31, 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.
Description
Previously, the detail area always used a fixed default size (15em) unless
detailSizewas explicitly set. This meant developers had to manually specify a size for every use case to avoid content being either too tight or wasting space.Now, when
detailSizeis not specified, the component automatically measures the intrinsic size of the detail content by placing it in a min-content CSS grid column when it first appears, caches the result, and uses it as the column size afterwards. This gives a good default without requiring any configuration. SettingdetailSizeexplicitly still works as before and takes precedence.A new public
recalculateLayout()method is provided for cases where the detail content changes dynamically (e.g., opening a nested master-detail layout) and the cached size needs to be re-measured. Because this method triggers synchronous DOM reads and writes that force layout recalculation, it can be expensive, so you should call it with caution and avoid calling it too frequently. The only place it is called automatically is the_setDetailprotected method used by Flow to support variable view sizes.Part of #11348
Type of change