From 3ad3c3a68ef9de138719d89f9500b1a0bae5cb3a Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Tue, 1 Jul 2025 10:56:31 -0400
Subject: [PATCH] Allow closing the task modal by clicking in the margins
 (#165)

---
 .../src/app/(authenticated)/usage/TaskModal.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/(authenticated)/usage/TaskModal.tsx b/apps/web/src/app/(authenticated)/usage/TaskModal.tsx
index cfcb42f735..4f07860a06 100644
--- a/apps/web/src/app/(authenticated)/usage/TaskModal.tsx
+++ b/apps/web/src/app/(authenticated)/usage/TaskModal.tsx
@@ -72,11 +72,18 @@ export const TaskModal = ({ task, open, onClose }: TaskModalProps) => {
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContentFullScreen>
-        <TaskDetails
-          task={task}
-          messages={messages}
-          headerActions={headerActions}
-        />
+        <div className="fixed inset-0 p-8 md:p-16" onClick={onClose}>
+          <div
+            className="container mx-auto bg-background rounded-lg shadow-lg max-h-full overflow-hidden h-full"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <TaskDetails
+              task={task}
+              messages={messages}
+              headerActions={headerActions}
+            />
+          </div>
+        </div>
       </DialogContentFullScreen>
     </Dialog>
   );