fix(overflow-menu): elevate portal z-index to prevent click interception on mobile (#1433)#1444
Merged
Merged
Conversation
…ion on mobile The OverflowMenu portal-rendered menu (z-index: 10) was being intercepted by parent stacking contexts on mobile, making menu items unclickable. This occurred when cardActions (.position: relative) created a stacking context that sat above the low z-index portal menu. Elevated .menuFixed from default z-index to var(--z-overlay) (50), which is the semantic token for portal-rendered overlays that escape component bounds. This ensures portal menus remain clickable regardless of page stacking contexts. - .menu retains z-index: var(--z-dropdown) for inline mode - .menuFixed now includes z-index: var(--z-overlay) via CSS override - No breaking changes; inline menus unaffected Fixes #1433 (mobile invoice deposits menu click timeout). Co-Authored-By: Claude frontend-developer (Haiku 4.5) <noreply@anthropic.com>
Contributor
|
🎉 This PR is included in version 2.6.0-beta.18 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
9 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixed a mobile-specific bug where OverflowMenu portal-rendered items became unclickable due to z-index stacking context interception. The menu was rendered via
createPortaltodocument.bodywith a low z-index (10), which allowed parent elements withposition: relative(like.cardActions) to intercept clicks.Changes
client/src/components/OverflowMenu/OverflowMenu.module.cssz-index: var(--z-overlay)(50) to.menuFixedselectorRoot Cause
On mobile, the invoice deposits card layout renders with
.cardActions { position: relative }, creating a stacking context. When the OverflowMenu portal (z-index: 10) rendered above the card, intermediate stacking contexts were intercepting pointer events, preventing clicks from reaching the menu items.Solution
Elevated the z-index of portal-rendered menus to use
--z-overlay(50), which is the semantic token for portal-rendered overlays that escape component bounds. This is above--z-dropdown(10) but below--z-modal(1000).Testing
invoice-deposits.spec.ts:665(Scenario 7) validates menu item clicks on mobile🤖 Generated with Claude Code