From c0c080c6acf50cb062116c2eea6d0552659fdff2 Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Thu, 21 Aug 2025 15:24:18 -0500
Subject: [PATCH] Improve modal dialog UX and sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove redundant success alert after presentation deletion
- Keep only confirmation modal before deletion
- Fix modal size classes CSS specificity
- Set reasonable min/max widths for modal sizes (small: 320-420px)
- Ensure responsive behavior on mobile devices

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../presentations/PresentationsList.tsx       |  5 -----
 src/components/ui/Modal.css                   | 21 ++++++++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/presentations/PresentationsList.tsx b/src/components/presentations/PresentationsList.tsx
index 82cf90d..7fe31d6 100644
--- a/src/components/presentations/PresentationsList.tsx
+++ b/src/components/presentations/PresentationsList.tsx
@@ -61,11 +61,6 @@ export const PresentationsList: React.FC = () => {
       setDeleting(presentationId);
       await deletePresentation(presentationId);
       setPresentations(prev => prev.filter(p => p.metadata.id !== presentationId));
-      setAlertDialog({
-        isOpen: true,
-        message: 'Presentation deleted successfully',
-        type: 'success'
-      });
     } catch (err) {
       loggers.presentation.error('Failed to delete presentation', err instanceof Error ? err : new Error(String(err)));
       setAlertDialog({
diff --git a/src/components/ui/Modal.css b/src/components/ui/Modal.css
index de041ec..5bc08e2 100644
--- a/src/components/ui/Modal.css
+++ b/src/components/ui/Modal.css
@@ -39,19 +39,22 @@
   }
 }
 
-/* Modal Sizes */
-.modal-small {
+/* Modal Sizes - Applied to modal-content with size modifier */
+.modal-content.modal-small {
   width: 100%;
-  max-width: 400px;
+  min-width: 320px;
+  max-width: 420px;
 }
 
-.modal-medium {
+.modal-content.modal-medium {
   width: 100%;
+  min-width: 400px;
   max-width: 600px;
 }
 
-.modal-large {
+.modal-content.modal-large {
   width: 100%;
+  min-width: 500px;
   max-width: 800px;
 }
 
@@ -110,6 +113,14 @@
     max-height: 95vh;
   }
   
+  /* Override min-widths on mobile for better fit */
+  .modal-content.modal-small,
+  .modal-content.modal-medium,
+  .modal-content.modal-large {
+    min-width: auto;
+    width: 100%;
+  }
+  
   .modal-header {
     padding: 1rem 1rem 0 1rem;
   }