From 343d9c934c9a85fb5a74f7ec70f5c8dc748ed669 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 17:07:55 +0000
Subject: [PATCH] Fix Uppy modal display issues

---
 src/components/upload/UppyPhotoUpload.tsx |  3 +++
 src/index.css                             | 28 ++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/upload/UppyPhotoUpload.tsx b/src/components/upload/UppyPhotoUpload.tsx
index d18fe310..cdfc3466 100644
--- a/src/components/upload/UppyPhotoUpload.tsx
+++ b/src/components/upload/UppyPhotoUpload.tsx
@@ -89,6 +89,9 @@ export function UppyPhotoUpload({
       note: `Images up to ${maxSizeMB}MB, max ${maxFiles} files`,
       theme: 'auto',
       closeAfterFinish: true,
+      closeModalOnClickOutside: true,
+      disablePageScrollWhenModalOpen: true,
+      animateOpenClose: true,
     });
 
     // Add Image Editor plugin
diff --git a/src/index.css b/src/index.css
index 4bffd05f..709ba089 100644
--- a/src/index.css
+++ b/src/index.css
@@ -185,11 +185,22 @@ All colors MUST be HSL.
 
   /* Modal overlay styling */
   .uppy-Dashboard--modal {
-    z-index: 9999;
+    z-index: 9999 !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
   }
 
   .uppy-Dashboard--modal .uppy-Dashboard-overlay {
     @apply bg-background/80 backdrop-blur-sm;
+    z-index: 9998 !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
   }
 
   .uppy-Dashboard--modal .uppy-Dashboard-inner {
@@ -197,6 +208,21 @@ All colors MUST be HSL.
     box-shadow: var(--shadow-intense);
     max-width: 90vw;
     max-height: 90vh;
+    position: fixed !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    z-index: 10000 !important;
+  }
+
+  /* Ensure all uppy content stays contained */
+  .uppy-Dashboard--modal * {
+    position: relative !important;
+  }
+
+  .uppy-Dashboard--modal .uppy-Dashboard-AddFiles,
+  .uppy-Dashboard--modal .uppy-Dashboard-dropFilesHereHint {
+    position: static !important;
   }
 
   /* Status bar customization */