From e29f4407af0ae61cb71c4a294949bf2287210d48 Mon Sep 17 00:00:00 2001
From: Ubuntu <omer@Omer.dn3uxh3znnmu5eefnjnut0i1af.tlvx.internal.cloudapp.net>
Date: Sat, 16 May 2026 16:44:50 +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 were 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 around lines
602-626), while the Kobalte Dialog overlays used .modal-overlay (z-index
50) plus a Tailwind z-50 centering wrapper. Because 50 < 60, the full-width
drawer completely occluded the modal, so the user could 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. Visual mobile retest
should confirm the create and delete dialogs are now interactive on top of
the open session drawer; desktop behavior is unchanged because nothing
else in the app stacks between z-index 50 and 1310 in the same context.
---
 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>