-
-
Notifications
You must be signed in to change notification settings - Fork 173
Description
What
Several full-bleed pages (onboarding screens, empty states, feature gates) use relative z-10 on their content containers to sit above background decorations. This creates stacking context conflicts with the AppBar (z-10) and its children (UserMenu dropdown, notifications), making them unclickable when these pages are active.
Why
The pattern exists across 6 components:
pages/WebEndpoints.tsx:892components/common/CreateNamespace.tsx:235components/common/FeatureGate.tsx:43components/common/ConnectivityGuard.tsx:28pages/public-keys/index.tsx:197pages/firewall-rules/index.tsx:78
Each follows the same structure:
<div className="relative -m-8 flex-1 flex flex-col overflow-hidden">
{/* Background decorations */}
<div className="absolute inset-0 pointer-events-none">
<div className="... bg-primary/5 rounded-full blur-[120px]" />
<div className="... grid-bg opacity-30" />
</div>
{/* Content — problematic z-10 here */}
<div className="relative z-10 flex-1 flex items-center justify-center px-8 py-12">
...
</div>
</div>The relative z-10 was added to ensure the content renders above the absolute inset-0 background decorations. However, this is unnecessary because:
- DOM order already handles it. The content div comes after the decorations div in source order. Without explicit
z-index, later siblings paint on top of earlier ones per CSS stacking rules. pointer-events-nonealready prevents interaction issues. The decoration container haspointer-events-none, so it never intercepts clicks regardless of stacking order.z-10creates a new stacking context that competes with the AppBar's ownz-10. Since the full-bleed container uses-m-8to escape<main>'s padding, it extends into the AppBar's visual area. Both the AppBar and the content div end up atz-index: 10within the same parent stacking context, causing the content div (later in DOM) to paint over the AppBar's dropdown menus, making the UserMenu (Settings, Logout) and other AppBar controls unclickable.
Changes
Remove relative z-10 from the content container div in all 6 files. The background decorations remain visually behind the content through natural DOM ordering, and pointer-events-none continues to prevent any interaction interference.
Testing
On each affected page, verify:
- Background decorations (blur orbs, grid) render behind content
- AppBar UserMenu dropdown opens and items are clickable
- Page content (buttons, links, inputs) remains interactive