Menu-Item: Remove z-index stacking #1192
Conversation
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1192.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1192.westeurope.azurestaticapps.net |
There was a problem hiding this comment.
Pull Request Overview
This PR removes local stacking context issues from uui-menu-item by eliminating z-index usage and reordering DOM elements to maintain visual styling without blocking overlays.
- Removed hardcoded
z-index: 1from label and button elements - Moved
#label-button-backgroundelement to render before the label/button in DOM order - Updated CSS selectors from sibling combinators to
:has()pseudo-class for hover states
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1192.westeurope.azurestaticapps.net |
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1192.westeurope.azurestaticapps.net |
Summary
This removes the local stacking context from uui-menu-item. We keep hover/active visuals using :has() and an earlier #label-button-background element.
Why
-Today, uui-menu-item sets z-index: 1 on the label/button to stay above #label-button-background.
-Side effect: it creates a stacking fight so components like the signs popover render under the menu item.
-We want predictable stacking (paint order), so overlays/tooltips/popovers aren’t blocked.
What changed
-Removed the hard z-index: 1 on the clickable label/button.
-Moved #label-button-background to render before the label/button in the DOM.
-Replaced sibling combinator ~ hover logic with :has() so hover/focus styles still work when the background comes first.
This keeps the label clickable (the background can’t steal pointer events) and avoids the stacking wall.