fix(ui): raise worktree modal z-index above mobile session drawer (re-submission of #463)#467
Open
omercnet wants to merge 1 commit into
Open
Conversation
The 'Create worktree' and 'Delete worktree' dialogs in packages/ui/src/components/worktree-selector.tsx are invisible on mobile when opened from inside the session sidebar drawer. The session sidebar is rendered on phones as an MUI <Drawer> at zIndex 60 with width 100vw (see packages/ui/src/components/instance/instance-shell2.tsx lines 649-656), while the Kobalte Dialog overlays use .modal-overlay (z-index 50) plus a Tailwind z-50 centering wrapper. Because 50 < 60, the full-width drawer completely occludes the modal, so the user can open the create dialog but never see or interact with it. This change raises both dialog overlays to z-[60] and both content-wrapping divs to z-[1310], following the exact precedent already used in packages/ui/src/components/alert-dialog.tsx (lines 117-119) for the same scenario. Only four lines change across two Dialog.Portal blocks; no other class is touched, no shared CSS or token is altered, and no behavior or copy changes. Verification: npm run typecheck (both @codenomad/ui and electron-app workspaces) passes with exit 0. The repository defines no lint script, so typecheck is the available static-analysis gate. A minimal isolated repro that mirrors the exact stacking from origin/dev is published at omercnet/CodeNomad:repros/463-mobile-worktree-modal with iPhone 13 / Pixel 7 viewport screenshots demonstrating the bug and the fix. Re-submission of NeuralNomadsAI#463 with added visual evidence per maintainer request.
Collaborator
|
Lol! What is this? I am sorry again but I won't be replying to any comments posted by your bot anymore. Thanks |
|
PR builds are available as GitHub Actions artifacts: https://github.com/NeuralNomadsAI/CodeNomad/actions/runs/25971967913 Artifacts expire in 7 days.
|
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
2 participants
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
Re-submission of #463 with added visual evidence after the maintainer suggested the bug might already be fixed on
dev. I checked currentorigin/dev(HEAD00bfe52, includes #459 "tappable instance/project tab bar while session drawer is open") and the underlying filepackages/ui/src/components/worktree-selector.tsxis byte-identical to the previous PR base — the modal stacking issue is still present. This PR is rebased onorigin/devHEAD so reviewers see exactly the same base asdev.The bug
On phone layouts, opening Create worktree (or Delete worktree) from inside the session sidebar drawer renders the modal behind the drawer. The user can tap "Create worktree" but the dialog never becomes visible or interactive. This is the only way to reach the worktree picker on mobile (it lives in the sidebar), so the feature is effectively unreachable.
Root cause (verified against
origin/devHEAD)1. Session sidebar drawer —
packages/ui/src/components/instance/instance-shell2.tsxlines 649–656:Drawer occupies full 100vw at
zIndex: 60on phones.2. Worktree create/delete dialogs —
packages/ui/src/components/worktree-selector.tsxlines 425–426 and 497–498:Overlay uses
.modal-overlay(CSSz-index: 50) and content wrapper uses Tailwindz-50.50 < 60→ on a phone-sized viewport the full-width drawer occludes the entire modal.Why #459 doesn't cover this case
#459 fixes pointer events on the instance/project tab bar (the strip above the drawer paper). It modifies
instance-shell2.tsxto close floating drawers on tab interaction, but it does not change drawer z-index, the modal z-index inworktree-selector.tsx, or worktree-dialog open behavior. I confirmed by diffingorigin/dev:packages/ui/src/components/worktree-selector.tsxagainst the earlier PR base — file is byte-identical (same blob hasha3d3f209).Visual evidence
A minimal isolated repro (vanilla HTML + CSS that mirrors the exact stacking from
origin/dev) is published at:omercnet/CodeNomad:repros/463-mobile-worktree-modal
Screenshots at iPhone 13 (390x844) and Pixel 7 (412x915) viewports via headless Playwright, 2x DPR:
Bug — modal hidden behind drawer (origin/dev today)
Fix — modal rendered on top (this PR)
Pixel-level confirmation:
rgb(35, 35, 39)= drawer paper color (--surface-secondary). Drawer covers the entire viewport, modal is not visible.rgb(26, 26, 29)= modal surface color (--surface-base). Modal renders on top of drawer.See the repro branch README for the full breakdown, the two HTML files, and both viewport pairs.
Fix
Four lines across two
Dialog.Portalblocks inworktree-selector.tsx. Mirrors the exact precedent inpackages/ui/src/components/alert-dialog.tsxlines 117–119:Applied to both the create dialog and the delete dialog. No other classes touched, no shared CSS/token changes, no behavior/copy/i18n changes, no other modal affected.
Verification
npm run typecheck(covers@codenomad/uiand the electron-app workspace) → exit 0.lintscript, so typecheck is the available static-analysis gate.Alternative considered
A different design would be to auto-close the drawer when the worktree dialog opens (analogous to how #459 closes floating drawers on tab switches). That would also work, but it's a bigger behavioral change and inconsistent with how
alert-dialog.tsxhandles the same stacking — happy to take that direction if you'd prefer it.Refs