Skip to content

fix: isolate root stacking context so internal z-indexes stay inside the browser#61

Merged
CahidArda merged 2 commits into
masterfrom
DX-2799-fix-tab-shadow-z-index
Jul 3, 2026
Merged

fix: isolate root stacking context so internal z-indexes stay inside the browser#61
CahidArda merged 2 commits into
masterfrom
DX-2799-fix-tab-shadow-z-index

Conversation

@ytkimirti

@ytkimirti ytkimirti commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

Tab scroll shadows (z-10) and dragged tabs (z-50) stacked above the embedding page's own elements, like the console's sticky navbar on database details. Adding isolation: isolate on the root element contains every internal z-index. Portaled overlays (dialogs, popovers, toasts) are unaffected since they render outside the root.

Also scopes the playground shell under ups-db so the credentials form is styled on Vercel previews: every selector in the css bundle is prefixed with .ups-db, and the form rendered outside of it, showing up completely unstyled.

Reproduced with an overflowing tab strip and a console-style sticky navbar (z-10) overlapping the tab bar:

before

after

@vercel

vercel Bot commented Jul 2, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-redis-browser Ready Ready Preview, Comment Jul 2, 2026 3:33pm

Request Review

@linear-code

linear-code Bot commented Jul 2, 2026

Copy link
Copy Markdown

DX-2799

@CahidArda CahidArda merged commit 62c196c into master Jul 3, 2026
4 checks passed
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.

2 participants