From d87002d357bd8ba7763e5993ec2faea309334821 Mon Sep 17 00:00:00 2001
From: Ubuntu <omer@Omer.dn3uxh3znnmu5eefnjnut0i1af.tlvx.internal.cloudapp.net>
Date: Sat, 16 May 2026 20:21:06 +0000
Subject: [PATCH] fix(ui): raise worktree modal z-index above mobile session
 drawer

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 #463 with added visual evidence per maintainer request.
---
 packages/ui/src/components/worktree-selector.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/worktree-selector.tsx b/packages/ui/src/components/worktree-selector.tsx
index a3d3f209..e67fa1ea 100644
--- a/packages/ui/src/components/worktree-selector.tsx
+++ b/packages/ui/src/components/worktree-selector.tsx
@@ -422,8 +422,8 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
 
       <Dialog open={createOpen()} onOpenChange={(open) => !open && setCreateOpen(false)}>
         <Dialog.Portal>
-          <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">
             <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-5">
               <div>
                 <Dialog.Title class="text-xl font-semibold text-primary">Create worktree</Dialog.Title>
@@ -494,8 +494,8 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
 
       <Dialog open={deleteOpen()} onOpenChange={(open) => !open && closeDeleteDialog()}>
         <Dialog.Portal>
-          <Dialog.Overlay class="modal-overlay" />
-          <div class="fixed inset-0 z-50 flex items-center justify-center p-3 md:p-4">
+          <Dialog.Overlay class="modal-overlay z-[60]" />
+          <div class="fixed inset-0 z-[1310] flex items-center justify-center p-3 md:p-4">
             <Dialog.Content class="modal-surface w-[clamp(640px,45vw,960px)] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] overflow-y-auto p-4 flex flex-col gap-3">
               <div>
                 <Dialog.Title class="text-xl font-semibold text-primary">Delete worktree</Dialog.Title>