ref(🥞): restructure DOM order for paint-order stacking#114520
Draft
natemoo-re wants to merge 7 commits into
Draft
ref(🥞): restructure DOM order for paint-order stacking#114520natemoo-re wants to merge 7 commits into
natemoo-re wants to merge 7 commits into
Conversation
github-actions
Bot
added
the
Scope: Frontend
natemoo-re
force-pushed
the
nm/zindex/dom-order
branch
from
ffac45b to
2517a0d
Compare
natemoo-re
force-pushed
the
nm/zindex/dom-order
branch
from
2517a0d to
d06f45f
Compare
natemoo-re
force-pushed
the
nm/zindex/layer-primitive
branch
from
d9e086a to
38c44e6
Compare
natemoo-re
force-pushed
the
nm/zindex/dom-order
branch
from
d06f45f to
3488bfd
Compare
Contributor
📊 Type Coverage Diff✅ No new type safety issues introduced. Coverage: 93.59% |
natemoo-re
force-pushed
the
nm/zindex/dom-order
branch
from
3488bfd to
0009ddd
Compare
This was referenced May 20, 2026
natemoo-re
force-pushed
the
nm/zindex/dom-order
branch
from
0009ddd to
3547b92
Compare
natemoo-re
force-pushed
the
nm/zindex/layer-primitive
branch
from
8c5a144 to
39b9752
Compare
natemoo-re
force-pushed
the
nm/zindex/dom-order
branch
2 times, most recently
from
fdd2258 to
6444eb3
Compare
natemoo-re
force-pushed
the
nm/zindex/layer-primitive
branch
from
167ce34 to
17924a0
Compare
natemoo-re
force-pushed
the
nm/zindex/dom-order
branch
from
6444eb3 to
951f794
Compare
Move overlay elements (drawer, modal, indicators) after content in DOM order so they paint above content without relying solely on global z-index values. Wrap content area, drawer panel, and modal in Layer components to create isolated stacking contexts. Existing z-index values and TooltipContext are kept as safety nets and will be removed in follow-up PRs once portal consumers are wired to Layer outlets. Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
Give navigation components their own Layer so tooltips and dropdowns render into the nav portal outlet instead of escaping to document.body. Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
Apply Layer isolation styles directly to DrawerSlidePanel via the render child className pattern, avoiding a wrapper div that would break the flex layout. Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
TopBar is app chrome, not page content. Use the render child pattern to apply Layer isolation styles directly to the sticky Flex element, preserving sticky positioning while giving TopBar tooltips their own nav portal outlet. Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The Layer wrapper div broke flex layout in two places: - Content area: extra div between flex column parent and Layout.Page prevented flex:1 from stretching, collapsing page content height - Navigation: extra block div inside flex row caused sidebars to stack vertically instead of side-by-side Use render-child pattern to apply isolation:isolate directly to existing elements without introducing intermediate wrapper divs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
natemoo-re
force-pushed
the
nm/zindex/layer-primitive
branch
from
17924a0 to
d66e9b8
Compare
natemoo-re
force-pushed
the
nm/zindex/dom-order
branch
from
4841234 to
9f0cc77
Compare
This was referenced May 28, 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
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.
Summary
Move overlay elements (drawer, modal, indicators) after content in DOM order so they paint above content without relying solely on global z-index values. Wrap content area, drawer panel, and modal in Layer components to create isolated stacking contexts.
DOM Reorder
GlobalDrawernow renders its backdrop and panel after{children}instead of before.GlobalModalandIndicatorsnow render after theErrorBoundarycontent outlet. This makes DOM order agree with intended paint order — later siblings paint above earlier ones.Layer Wrappers
Page content is wrapped in
<Layer variant="content">, drawer panel content in<Layer variant="overlay">, and modal content in<Layer variant="overlay">. Each creates an isolated stacking context viaisolation: isolate.Existing z-index values and
TooltipContextare kept as safety nets — they will be removed in later PRs once portal consumers are wired to Layer outlets.🥞 Layer Primitive Series
nm/zindex/layer-primitive— Layer component + hooksnm/zindex/dom-order— DOM restructuring for paint-order stacking ← this PRnm/zindex/wire-portals— Wire portal consumers to Layer outletsnm/zindex/remove-structural-zindex— Remove structural z-index refsnm/zindex/remove-portal-zindex— Remove portal z-index refsnm/zindex/remove-local-zindex— Replace local z-index refs with bare z-index: 1nm/zindex/deprecate-zindex— Deprecate theme.zIndex scalenm/zindex/lint-ban— Lint rule banning z-index/zIndexnm/zindex/final-cleanup— Remove theme.zIndex entirelyTest plan
pnpm run typecheck