fix(examples/hub-next): keep the auth overlay above the dashboard - #259
Merged
Conversation
The AuthOverlay renders as the root div's first child, before header/ main/footer, with position: fixed but no z-index. main uses position: relative for its absolutely-positioned iframe/panel children, so with both at z-index: auto the two compete in the same stacking group and paint order falls back to tree order — main comes later in the DOM and painted on top, hiding the authorization form behind the dashboard. Add the shared z-modal-content layer (the same one FixPromptsDialog uses for its full-screen overlay) so the overlay reliably stacks above the rest of the page regardless of DOM order.
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
In
examples/hub-next, the authorization overlay (added in #204 to gate the hub behind an interactive OTP) rendered behind the dashboard instead of on top of it, making the "Authorize" form invisible/unusable.Root cause
AuthOverlayis rendered as the root div's first child, beforeheader/main/footer, withposition: fixedbut noz-index. The dashboard's<main>usesposition: relative(for its absolutely-positioned iframe/panel children). With both atz-index: auto, they land in the same stacking group, and paint order falls back to DOM/tree order —maincomes later in the document, so it painted on top of the overlay, hiding the authorization heading, icon, and form behind the (visually similar, light-gray) dashboard background.The Vite reference example never hit this because it builds the overlay imperatively and
document.body.append()s it, making it the literal last element in the DOM — which happens to win tree-order stacking without an explicitz-index.Fix
Add the shared
z-modal-contentlayer — the same oneFixPromptsDialogalready uses for its own full-screen overlay — so the auth overlay reliably stacks above the rest of the page regardless of DOM order.Verification
Reproduced visually with a local build +
next dev, confirmed viaelementFromPointthat<main>was the topmost element over the overlay's heading before the fix, and topmost was the overlay's own content after. Re-ran the full auth flow (entering the terminal-printed OTP) end-to-end after the fix — the dashboard loads correctly once authorized.This PR was created with the help of an agent.