Skip to content

fix(ui-react): remove unnecessary relative z-10 from full-bleed content containers #5907

@luizhf42

Description

@luizhf42

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:892
  • components/common/CreateNamespace.tsx:235
  • components/common/FeatureGate.tsx:43
  • components/common/ConnectivityGuard.tsx:28
  • pages/public-keys/index.tsx:197
  • pages/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:

  1. 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.
  2. pointer-events-none already prevents interaction issues. The decoration container has pointer-events-none, so it never intercepts clicks regardless of stacking order.
  3. z-10 creates a new stacking context that competes with the AppBar's own z-10. Since the full-bleed container uses -m-8 to escape <main>'s padding, it extends into the AppBar's visual area. Both the AppBar and the content div end up at z-index: 10 within 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions