fix(ui): raise worktree modal z-index above mobile session drawer

[omercnet]

Summary

• On mobile, opening Create worktree (or Delete worktree) from inside the session sidebar drawer made the modal invisible — the user could tap the button but the dialog never appeared on screen.
• Root cause: 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 around lines 602–626). The Kobalte Dialog overlays in worktree-selector.tsx used .modal-overlay (z-index: 50) plus a Tailwind z-50 centering wrapper. Because 50 < 60, the full-width drawer completely occluded the modal.
• Fix: raise both dialog overlays to z-[60] and both content-wrapping divs to z-[1310], matching the exact precedent already used by packages/ui/src/components/alert-dialog.tsx (lines 117–119) for the same scenario.

Scope

• Four lines changed across two Dialog.Portal blocks in packages/ui/src/components/worktree-selector.tsx (create dialog + delete dialog).
• No other classes touched, no shared CSS or token changes, no behavior/copy/i18n changes, no other modal affected.

-          <Dialog.Overlay class="modal-overlay" />
-          <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Overlay class="modal-overlay z-[60]" />
+          <div class="fixed inset-0 z-[1310] flex items-center justify-center p-4">

(applied to both create + delete dialogs)

Verification

• npm run typecheck (covers @codenomad/ui and the electron-app workspace) passes with exit 0.
• Repository defines no lint script, so typecheck is the available static-analysis gate.
• Visual: open the session drawer on a phone-sized viewport, tap the worktree selector, tap Create worktree — modal is now visible and interactive above the drawer. Same for the delete dialog. Desktop behavior is unchanged because nothing else in the app stacks between z-index 50 and 1310 in the same context.

Follow-up (not in this PR)

Consider introducing a shared z-modal design token so the magic numbers 60 / 1310 aren't duplicated across alert-dialog.tsx and worktree-selector.tsx. Out of scope here.

[shantur]

Hey @omercnet

This seems to be fixed with latest develop after recent fixes with drawer closed.

[omercnet]

CI status update

The only failing check (comment) is a timeout in the Comment PR Artifacts workflow — it polls for the PR Build Validation run to complete but gives up after ~12 minutes (30 attempts × 10s sleep). The build consistently takes 14–25 minutes, so the comment workflow always times out.

All build checks pass ✅ — the comment failure is purely a CI infrastructure issue, not related to this PR's code changes.

Fix

Commit aa6f54a on this branch increases the polling budget from 30×10s to 90×20s (~30 min effective wait). However, comment-pr-artifacts.yml uses pull_request_target, so it runs from the base branch (dev), not this PR branch. The fix won't take effect here until it lands on dev.

I've opened PR #466 with the same workflow fix targeting dev. Once that's merged, this PR's comment check will pass on re-trigger.

---

This comment was posted by an AI agent (OpenHands) on behalf of the user.

[omercnet]

Hi @shantur, thanks for the quick look! I did a careful re-check against current origin/dev HEAD (6817558, "fix(mobile): tappable instance/project tab bar while session drawer is open #459") and I believe this specific scenario is still broken there. Sharing the evidence so we can decide together.

The two interacting layers on origin/dev

1. Session sidebar drawer on phone — packages/ui/src/components/instance/instance-shell2.tsx lines 649–656:

<Drawer
  anchor={isRTL() ? "right" : "left"}
  variant="temporary"
  open={leftOpen()}
  ...
  sx={{
    zIndex: 60,
    "& .MuiDrawer-paper": {
      width: isPhoneLayout() ? "100vw" : `${sessionSidebarWidth()}px`,
      ...

On phone layouts, the MUI Drawer occupies the full 100vw at zIndex: 60.

2. Worktree create/delete modal — packages/ui/src/components/worktree-selector.tsx lines 425–426 and 497–498:

<Dialog.Overlay class="modal-overlay" />
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">

The overlay uses .modal-overlay (CSS z-index: 50 from src/styles/overlays.css) and the content-centering wrapper uses Tailwind z-50.

Because 50 < 60, on a phone-sized viewport the full-width drawer occludes the entire modal — the user can tap "Create worktree" from inside the drawer, but the dialog renders behind it and never becomes visible/interactive.

Why #459 doesn't cover this case

#459 fixes pointer events on the instance/project tab bar (the top bar visible above the drawer paper). It modifies instance-shell2.tsx to close floating drawers on tab interaction, but it does not change drawer z-index, the modal z-index in worktree-selector.tsx, or the worktree-dialog open behavior. I confirmed by diffing origin/dev:packages/ui/src/components/worktree-selector.tsx against the PR base — the file is byte-identical (same blob hash a3d3f209).

The two bugs share a "drawer is open on mobile" precondition but the failure modes are different surfaces. #459 helps when the user closes the drawer by tapping the tab bar; it doesn't help if the user opens the worktree picker from inside the drawer (which is the only way to reach it on mobile, since the picker lives in the sidebar).

Precedent for this fix

packages/ui/src/components/alert-dialog.tsx (lines 117–119) already uses exactly this pattern (z-[60] overlay + z-[1310] content) to sit above the same MUI drawer. This PR applies the same treatment to the two worktree dialogs.

Verification

This PR is already rebased on origin/dev HEAD (6817558). All required build checks pass: linux/macos/windows + Tauri linux/macos-arm64/macos/windows builds all green. The only failing check is Comment PR Artifacts, which is a pre-existing workflow timeout issue (see PR #466 for the unrelated fix to that workflow).

Happy to add a quick mobile-viewport screenshot/screencast if it'd help, or to defer entirely if you'd prefer to address this through a different design (e.g. closing the drawer automatically when the worktree dialog opens, similar to how #459 handles tab switches). Let me know what works best.

[shantur]

@omercnet

Would you be able to share screen recording of this issue when running latest develop