From e5e4dca8e47dbd4eab6511748cfce0e70af9ae35 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 18:21:45 +0100
Subject: [PATCH] Fix modal to always be 16:9 aspect ratio

---
 components/ImageViewer.vue | 15 ++++++---------
 components/SimpleModal.vue |  2 +-
 layouts/default.vue        | 28 +++++++++++++---------------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/components/ImageViewer.vue b/components/ImageViewer.vue
index bcdec26..6221c62 100644
--- a/components/ImageViewer.vue
+++ b/components/ImageViewer.vue
@@ -1,14 +1,11 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full w-full">
     <div class="flex-1 flex items-center justify-center min-h-0">
-      <div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
-        <!-- Image -->
-        <NuxtImg 
-          v-if="gallery[currentIndex]"
-          :src="'/' + bucket + '/' + gallery[currentIndex].image" 
-          class="w-full h-full object-contain"
-        />
-      </div>
+      <NuxtImg 
+        v-if="gallery[currentIndex]"
+        :src="'/' + bucket + '/' + gallery[currentIndex].image" 
+        class="w-full h-full object-contain"
+      />
     </div>
 
     <!-- Dots indicator -->
diff --git a/components/SimpleModal.vue b/components/SimpleModal.vue
index 7b75d27..b920fa9 100644
--- a/components/SimpleModal.vue
+++ b/components/SimpleModal.vue
@@ -7,7 +7,7 @@
       <!-- Modal Panel -->
       <div class="fixed inset-0 flex items-center justify-center pointer-events-none">
         <div 
-          class="bg-white rounded-lg shadow-xl max-w-[80vw] max-h-[85vh] overflow-hidden relative pointer-events-auto"
+          class="bg-white rounded-lg shadow-xl w-[80vw] aspect-video max-h-[85vh] overflow-hidden relative pointer-events-auto"
           :style="{ maxHeight }"
         >
           <!-- Content -->
diff --git a/layouts/default.vue b/layouts/default.vue
index 270c1a8..9e03b4e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -87,21 +87,19 @@
             <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
           </ClientOnly>
         </div>
-        <div v-if="modalStore.type === 'video'" class="flex-1 flex items-center justify-center min-h-0">
-          <div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
-            <ClientOnly>
-              <iframe 
-                :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" 
-                width="100%" 
-                height="100%" 
-                frameborder="0" 
-                webkitallowfullscreen 
-                mozallowfullscreen 
-                allowfullscreen 
-                class="w-full h-full block"
-              ></iframe>
-            </ClientOnly>
-          </div>
+        <div v-if="modalStore.type === 'video'" class="w-full h-full flex items-center justify-center">
+          <ClientOnly>
+            <iframe 
+              :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" 
+              width="100%" 
+              height="100%" 
+              frameborder="0" 
+              webkitallowfullscreen 
+              mozallowfullscreen 
+              allowfullscreen 
+              class="w-full h-full block"
+            ></iframe>
+          </ClientOnly>
         </div>
         <div v-if="modalStore.type === 'document'" class="w-full flex flex-col h-[70vh]">
           <ClientOnly>