Account dropdown menu obscured by empty state gradient overlay on /apps page

[lyzno1]

Description:
On the /apps page when no apps are found, the account dropdown menu (top-right corner) appears to fade from top to bottom due to z-index layering conflict.

Root Cause:
The issue is caused by stacking context hierarchy, not just individual z-index values:

1. HeaderWrapper (web/app/components/header/header-wrapper.tsx:31) has z-[15] and creates a stacking context
2. Empty component overlay (web/app/components/apps/empty.tsx:26) has z-20 with gradient bg-gradient-to-t from-background-body to-transparent
3. Since HeaderWrapper's z-index (15) is lower than Empty's overlay (20), the entire header including the dropdown is rendered below the overlay
4. The gradient makes the bottom portion of the dropdown appear more obscured while the top is relatively clearer

Solution:
Increase HeaderWrapper z-index from z-[15] to z-[30] to ensure the header and all its children (including dropdowns) render above page content overlays.

Affected Component:
web/app/components/header/header-wrapper.tsx

[dosubot]

The dropdown is being obscured because the Empty component's gradient overlay uses z-20, while the account dropdown's MenuItems have no explicit z-index and default to 0, so the overlay sits visually above the dropdown (source).

The most maintainable fix is to add a higher z-index (like z-30) to the MenuItems element in account-dropdown/index.tsx. For example, update the className:

<MenuItems
  className="
    absolute right-0 mt-1.5 w-60 max-w-80 z-30
    origin-top-right divide-y divide-divider-subtle rounded-xl bg-components-panel-bg-blur shadow-lg
    backdrop-blur-sm focus:outline-none
  "
>

This will ensure the dropdown always appears above the overlay, matching how similar layering issues are resolved elsewhere in the codebase (example).

Alternatively, you could lower the overlay's z-index in the Empty component to z-10 or z-0, since it only needs to be above the NewAppCard (z-10) and not above header elements, but raising the dropdown's z-index is more future-proof and consistent with recent fixes (example).

Either approach will make the dropdown fully visible above the overlay.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}