From e9782db0446b3a134279cda41e94466904a2d75b Mon Sep 17 00:00:00 2001
From: Michael Ludlow <mludlow000@icloud.com>
Date: Sat, 27 Dec 2025 13:22:49 -0500
Subject: [PATCH] fix(ui): close parent modal when Edit dialog opens (#354)

Fixes #235

The Edit Task modal's close button (X) was unresponsive because both the parent
modal and the edit dialog used z-50 for their overlays. The parent's overlay
intercepted clicks meant for the edit dialog's close button.

This fix hides the parent modal while the Edit dialog is open, then reopens it
when the Edit dialog closes. This is a cleaner UX than z-index hacks.

Signed-off-by: Black Circle Sentinel <mludlow000@icloud.com>
---
 .../components/task-detail/TaskDetailModal.tsx     | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx b/apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx
index 6113454d..48c5dd05 100644
--- a/apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx
+++ b/apps/frontend/src/renderer/components/task-detail/TaskDetailModal.tsx
@@ -307,7 +307,11 @@ function TaskDetailModalContent({ open, task, onOpenChange, onSwitchToTerminals,
                     variant="ghost"
                     size="icon"
                     className="hover:bg-primary/10 hover:text-primary transition-colors"
-                    onClick={() => state.setIsEditDialogOpen(true)}
+                    onClick={() => {
+                      state.setIsEditDialogOpen(true);
+                      // Hide parent modal while edit dialog is open to fix z-index stacking
+                      onOpenChange(false);
+                    }}
                     disabled={state.isRunning && !state.isStuck}
                   >
                     <Pencil className="h-4 w-4" />
@@ -469,7 +473,13 @@ function TaskDetailModalContent({ open, task, onOpenChange, onSwitchToTerminals,
       <TaskEditDialog
         task={task}
         open={state.isEditDialogOpen}
-        onOpenChange={state.setIsEditDialogOpen}
+        onOpenChange={(open) => {
+          state.setIsEditDialogOpen(open);
+          // Reopen parent modal when edit dialog closes
+          if (!open) {
+            onOpenChange(true);
+          }
+        }}
       />
 
       {/* Delete Confirmation Dialog */}