From 96e81b12c3903b30e5dcac101f5b9e370d164f61 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 18:10:11 +0100
Subject: [PATCH] Update modal with simplified carousel and responsive sizing

---
 components/ImageViewer.vue | 18 ++++++++++--------
 components/SimpleModal.vue | 20 ++++++--------------
 layouts/default.vue        |  6 +++---
 3 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/components/ImageViewer.vue b/components/ImageViewer.vue
index 21980d2..bcdec26 100644
--- a/components/ImageViewer.vue
+++ b/components/ImageViewer.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="flex flex-col h-full">
-    <div class="relative h-[60vh] w-full flex items-center justify-center">
-      <!-- Image -->
-      <NuxtImg 
-        v-if="gallery[currentIndex]"
-        :src="'/' + bucket + '/' + gallery[currentIndex].image" 
-        class="max-w-full max-h-full object-contain"
-      />
+    <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>
     </div>
 
     <!-- Dots indicator -->
-    <div v-if="gallery.length > 1" class="flex gap-2 py-2 justify-center">
+    <div v-if="gallery.length > 1" class="flex-none flex gap-2 py-2 justify-center">
       <button 
         v-for="(img, index) in gallery" 
         :key="index"
diff --git a/components/SimpleModal.vue b/components/SimpleModal.vue
index 858d8c6..7b75d27 100644
--- a/components/SimpleModal.vue
+++ b/components/SimpleModal.vue
@@ -1,23 +1,15 @@
 <template>
   <Teleport to="body">
-    <div v-if="modelValue" class="fixed inset-0 z-50" @click.self="close">
-      <!-- Backdrop -->
-      <div class="fixed inset-0 bg-black/50" @click="close"></div>
+    <div v-if="modelValue" class="fixed inset-0 z-50">
+      <!-- Backdrop - click to close -->
+      <div class="fixed inset-0 bg-black/50 cursor-pointer" @click="close"></div>
       
       <!-- Modal Panel -->
-      <div class="fixed inset-0 flex items-center justify-center p-4">
+      <div class="fixed inset-0 flex items-center justify-center pointer-events-none">
         <div 
-          class="bg-white rounded-lg shadow-xl max-w-[85vw] max-h-[85vh] overflow-auto relative"
+          class="bg-white rounded-lg shadow-xl max-w-[80vw] max-h-[85vh] overflow-hidden relative pointer-events-auto"
           :style="{ maxHeight }"
         >
-          <!-- Close button -->
-          <button 
-            @click="close" 
-            class="absolute top-4 right-4 z-10 text-gray-500 hover:text-gray-700 text-2xl leading-none"
-          >
-            &times;
-          </button>
-          
           <!-- Content -->
           <slot />
         </div>
@@ -27,7 +19,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
   modelValue: Boolean,
   maxHeight: {
     type: String,
diff --git a/layouts/default.vue b/layouts/default.vue
index b7b8fa0..270c1a8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -87,8 +87,8 @@
             <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="w-full flex items-center justify-center">
-          <div class="w-full aspect-video">
+        <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" 
@@ -98,7 +98,7 @@
                 webkitallowfullscreen 
                 mozallowfullscreen 
                 allowfullscreen 
-                class="w-full h-full"
+                class="w-full h-full block"
               ></iframe>
             </ClientOnly>
           </div>