Refactor ImageModal component for improved layout and responsiveness

- Updated ImageModal styles to include overflow handling and a maximum height for better usability.
- Adjusted the structure to place the enlarged image at the top, enhancing visual presentation.
- Removed the redundant image container to streamline the component.

src/components/ui/ImageModal.astro

@@ -16,7 +16,8 @@
   <!-- Modal container with animation -->
   <div
     id="modal-container"
-    class="fixed top-1/2 left-1/2 z-60 max-w-4xl w-full p-4 transform -translate-x-1/2 -translate-y-1/2 scale-95 transition-all duration-300 ease-in-out flex flex-col items-center"
+    class="fixed top-1/2 left-1/2 z-60 max-w-4xl w-full p-4 transform -translate-x-1/2 -translate-y-1/2 scale-95 transition-all duration-300 ease-in-out flex flex-col items-center overflow-y-auto"
+    style="max-height: 90vh;"
   >
     <!-- Close button -->
     <button
@@ -35,21 +36,14 @@
       </svg>
     </button>
 
-    <!-- Image container -->
-    <div
-      class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden flex flex-col justify-center items-center"
-      style="min-height: 350px; max-height: 75vh; min-width: 320px;"
-    >
-      <div class="flex flex-1 items-center justify-center w-full min-h-[250px]" style="height: 100%;">
-        <img
-          id="modal-image"
-          src=""
-          alt="Enlarged certificate"
-          class="w-auto object-contain max-h-[60vh]"
-          style="vertical-align: middle;"
-        />
-      </div>
-    </div>
+    <!-- Enlarged Image at the Top -->
+    <img
+      id="modal-image"
+      src=""
+      alt="Enlarged certificate"
+      class="w-auto object-contain max-h-[60vh] mb-4 mx-auto"
+      style="vertical-align: middle;"
+    />
 
     <!-- Caption -->
     <div id="modal-caption" class="mt-2 text-center text-white text-lg font-medium"></div>