fix(audit-sprint-6b): z-index scale adoption (resubmit, was #172) - #187
Merged
Conversation
Background: app/globals.css already had a 10-value z-index scale, but
adoption was sparse — only the product-tour overlays used the CSS vars,
while modal/overlay/command-palette surfaces all hardcoded `z-50`,
`z-[60]`, etc. Result was the chaotic survey: 280 z-index uses, peaks
at z-[10000] for panic-level layers.
This PR doesn't migrate all 30 ad-hoc modal surfaces (most are slated
for replacement by the Sprint 4c primitives — fixing their z-index now
is wasted work). It establishes the *primitives* and the *surfaces
that will remain* on the token scale, so once Phase 2/3 modal
migrations land, every dialog automatically sits in the right layer.
Changes
- app/globals.css: new `--z-toast: 110` token between `--z-tour` (100)
and `--z-debug` (120). Toasts must sit above tour overlays so a
critical toast firing during a product tour stays visible. Scale
comment expanded with the why for each band.
- components/ui/dialog.tsx, alert-dialog.tsx: overlay →
var(--z-modal-backdrop), content → var(--z-modal). Was z-50 for
both (broken — content would never render above its own backdrop
on equal z; relied on DOM order).
- components/ui/sheet.tsx: same treatment.
- components/ui/toaster.tsx: sonner root → var(--z-toast).
- components/CookieConsent.tsx: was z-[60] hardcoded →
var(--z-overlay). Banner now sits above page chrome, below modals
+ tour + toast — correct precedence.
- components/command-palette/CommandPalette.tsx: was z-50 for both
backdrop and content → token-scaled. Cmd-K now plays nicely with
a tour overlay calling it out.
What this PR does NOT touch
- The 23 remaining ad-hoc modal surfaces (per the modal-audit agent's
inventory). Each is slated for replacement by Dialog/AlertDialog/
Sheet in Phase 2/3 — fixing their z-index now would be reverted
when the migration happens. The new primitives already use the
token scale, so the migration is a net win on z-index too.
- The 183 z-10 / 38 z-50 page-decoration uses. Most are sticky
headers and visual layering, not modal-scoped, no conflict to fix.
- tailwind.config.ts: not extended with z- utility classes. Inline
style stays cleaner here because CSS variables in Tailwind's
`extend.zIndex` require either arbitrary-value syntax or a
rebuild step; inline style sidesteps both.
Built on top of fix/audit-sprint-4c-modal-primitives (PR #167)
because the Dialog/AlertDialog/Toaster primitives live there.
Validation
- tsc -p tsconfig.typecheck.json: clean
- eslint: 0 errors, 18 warnings (baseline)
- jest: 5319/5334 pass (no test changes)
Test plan
- Open a Dialog while a product tour is running — tour overlay
should be above the dialog backdrop but below an active toast.
- Trigger toast.error() while a Sheet is open — toast visible at
bottom-right above the sheet.
- Open command palette while CookieConsent is showing — command
palette eats the banner correctly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughThis PR consolidates z-index management across the application by introducing CSS custom properties to replace hardcoded Tailwind z-index classes. A global stacking order is documented and enforced through standardized tokens, ensuring consistent layering for modals, dialogs, toasts, and overlays. ChangesZ-Index Token Consolidation
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
♿ Accessibility Test ResultsTests Performed:
Artifacts: Download the accessibility reports from the "Artifacts" section for detailed results. |
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.
Resubmit after base 4c branch deletion. Rebased onto main.
Summary by CodeRabbit
Style
Refactor