improvement(ui): give the two full-screen takeovers named design-system layers

[waleedlatif1]

Summary

• The app has exactly two full-screen takeovers — the session-expired screen and the desktop minimum-version gate — and they disagreed on every piece of chrome: an ad-hoc z-[9999] against a z-50 that sat below --z-dropdown, --bg against --surface-1, a legacy Button against a Chip, and muted grey on their failure copy.
• The z-index was a real bug, not just an inconsistency. At z-50 the session-expired takeover rendered underneath the desktop browser panel's replacement snapshot, which paints at calc(var(--z-modal) - 1).
• Adds two named layers above the poppers rather than one shared layer: --z-takeover: 500 for in-app takeovers, --z-shell-gate: 600 for the desktop shell gate. The gate mounts earlier in the tree than the session screen, so a single shared layer would have let document order decide which wins — silently reversing the precedence the old z-[9999]/z-50 pair had. An incompatible shell invalidates everything the web app renders inside it, so it outranks.
• Both takeovers hid their pre-paint state with opacity: 0, which still hit-tests, so a full-viewport surface could swallow clicks before it painted. They now use the visibility toggle ModalContent already uses for the same handshake.
• Aligns their background, primary action, body-copy and error tokens, and corrects the z-scale in the design-review skill, which listed --z-toast at 500 when it has long been 150.

Type of Change

• Bug fix

Testing

• 85 tests across both takeovers, the workspace layout and the desktop lib pass; bun run type-check, bun run lint, bun run check:audits (29/29) and the block-registry check all pass
• Verified both tokens are defined once in the unconditional :root, so they resolve in both themes, and that --text-error / --text-secondary exist in both
• Swept for anything rendering above 400: the five hits are pre-existing ad-hoc z-index values on transient in-workspace surfaces, all already above the old z-[9999] and z-50, so this is not a regression — worth a separate cleanup

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview	Aug 18, 2026 11:17pm

[cursor]

PR Summary

Low Risk
UI-only layering and token alignment on two takeover screens; no auth or data-path changes beyond fixing z-index and click-blocking behavior.

Overview
Introduces --z-takeover (500) and --z-shell-gate (600) in globals.css so full-screen takeovers sit above poppers, with the desktop minimum-version gate outranking in-app takeovers instead of relying on ad-hoc z-[9999] vs z-50 (the session-expired screen was effectively below modal-layer UI).

Session-expired and desktop update gate now use those tokens, share bg-[var(--bg)], and hide pre-paint with visibility: hidden instead of opacity: 0 so invisible overlays do not swallow clicks. Chrome is aligned: primary action Chip, body copy --text-secondary, failures --text-error, and the design-review skill documents the corrected z-scale.

^{Reviewed by Cursor Bugbot for commit c809b1d. Configure here.}

[greptile-apps]

Greptile Summary

The PR aligns the session-expired and desktop-version takeovers on a shared design-system layer.

• Adds dedicated takeover and shell-gate z-index tokens.
• Updates both takeovers’ visibility, colors, alignment, and action components.
• Corrects the documented design-system z-index scale.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
apps/sim/app/_shell/desktop-update-gate.tsx	Moves the desktop update gate onto the shell-gate layer and aligns its action and error styling with the shared takeover design.
apps/sim/app/workspace/[workspaceId]/components/session-expired/session-expired.tsx	Moves the session-expired screen onto the takeover layer and applies state-specific semantic copy colors.
apps/sim/app/_styles/globals.css	Defines explicit z-index tokens for in-app takeovers and the higher-priority desktop shell gate.
.agents/skills/emcn-design-review/SKILL.md	Updates the documented z-index scale to match the application tokens.

_{Reviews (2): Last reviewed commit: "fix(ui): keep the shell gate above in-ap..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit c809b1d. Configure here.}