diff --git a/resources/views/partials/image-modal.blade.php b/resources/views/partials/image-modal.blade.php
index 63bde2522..7d77ae0f2 100644
--- a/resources/views/partials/image-modal.blade.php
+++ b/resources/views/partials/image-modal.blade.php
@@ -19,9 +19,9 @@
          @click="close()"></div>
 
     <!-- Modal panel container -->
-    <div class="fixed inset-0 z-10 overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <div class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl"
+    <div class="fixed inset-0 z-10 overflow-y-auto" @click.self="close()">
+        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0" @click.self="close()">
+            <div class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-6xl"
                  x-transition:enter="transition ease-out duration-200"
                  x-transition:enter-start="opacity-0 scale-95"
                  x-transition:enter-end="opacity-100 scale-100"
@@ -42,7 +42,7 @@
                 <div class="flex justify-center">
                     <img x-bind:src="imageUrl"
                          x-bind:alt="imageTitle"
-                         class="max-w-full max-h-[70vh] rounded-lg shadow-lg">
+                         class="max-w-full max-h-[85vh] rounded-lg shadow-lg">
                 </div>
             </div>
             <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
diff --git a/resources/views/partials/preview-modal.blade.php b/resources/views/partials/preview-modal.blade.php
index 0328f460e..028171e89 100644
--- a/resources/views/partials/preview-modal.blade.php
+++ b/resources/views/partials/preview-modal.blade.php
@@ -19,9 +19,9 @@
          @click="close()"></div>
 
     <!-- Modal panel container -->
-    <div class="fixed inset-0 z-10 overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <div class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"
+    <div class="fixed inset-0 z-10 overflow-y-auto" @click.self="close()">
+        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0" @click.self="close()">
+            <div class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-5xl"
                  x-transition:enter="transition ease-out duration-200"
                  x-transition:enter-start="opacity-0 scale-95"
                  x-transition:enter-end="opacity-100 scale-100"
@@ -56,7 +56,7 @@
                          x-bind:alt="title"
                          x-on:error="onImageError()"
                          x-on:load="onImageLoad()"
-                         class="max-w-full max-h-96 rounded-lg shadow-lg">
+                         class="max-w-full max-h-[80vh] rounded-lg shadow-lg">
                 </div>
 
                 <!-- Hidden image for preloading -->