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>

src/components/widgets/CompactCertifications.astro

@@ -123,9 +123,6 @@ const {
     }
   </div>
 
-  {/* Include the image modal component */}
-  <ImageModal />
-  
   {
     callToAction && (
       <div class="flex justify-center mx-auto w-fit mt-8 font-medium">

src/layouts/Layout.astro

@@ -16,6 +16,7 @@ import LanguagePersistence from '~/components/LanguagePersistence.astro';
 import GlobalBackground from '~/components/ui/GlobalBackground.astro';
 import CookieBanner from '~/components/CookieBanner.astro';
 import BackToTop from '~/components/ui/BackToTop.astro';
+import ImageModal from '~/components/ui/ImageModal.astro';
 
 // Comment the line below to disable View Transitions
 import { ClientRouter } from 'astro:transitions';
@@ -83,5 +84,6 @@ const { language, textDirection } = I18N;
       })(window, document, 'script', 'https://chat.365devnet.eu/livechat');
     </script>
     <!-- End of Rocket.Chat Livechat Script -->
+    <ImageModal />
   </body>
 </html>