From 4bf23f0d25df83970e29db8d3984b38ab42eaced Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Thu, 19 Feb 2026 02:27:15 +0100
Subject: [PATCH] Fix image carousel sizing and modal height for audio

---
 components/ImageSlider.vue | 8 ++++----
 components/Modal/Modal.vue | 5 ++++-
 layouts/default.vue        | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/ImageSlider.vue b/components/ImageSlider.vue
index 85bed3e..8db1c93 100644
--- a/components/ImageSlider.vue
+++ b/components/ImageSlider.vue
@@ -1,6 +1,6 @@
 <template>
     <Swiper
-      :autoHeight="true"
+      :autoHeight="false"
       :loop="true"
       :spaceBetween="30"
       :centeredSlides="true"
@@ -21,12 +21,12 @@
         '--swiper-navigation-top-offset': '5rem'
       }"
       :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
-      class="h-full flex items-center justify-center"
+      class="h-full w-full"
     >
 
-      <SwiperSlide v-for="image in gallery" class="!flex !items-center !justify-center !h-auto !py-10 !bg-zinc-100">
+      <SwiperSlide v-for="(image, index) in gallery" :key="image.id || index" class="!flex !items-center !justify-center !py-4 !bg-zinc-100">
           <img :src="'/' + bucket + '/' + image.image" 
-          style="max-width: calc(100% - 80px); max-height: 70vh; object-fit: contain;"/>
+          style="max-width: 100%; max-height: calc(85vh - 40px); object-fit: contain;"/>
       </SwiperSlide>
     </Swiper>
   </template>
diff --git a/components/Modal/Modal.vue b/components/Modal/Modal.vue
index 043e367..35052e1 100644
--- a/components/Modal/Modal.vue
+++ b/components/Modal/Modal.vue
@@ -12,11 +12,13 @@ const props = withDefaults(
     modelValue?: boolean
     persistent?: boolean
     fullscreen?: boolean
+    maxHeight?: string
   }>(),
   {
     modelValue: false,
     persistent: false,
     fullscreen: false,
+    maxHeight: '85vh',
   },
 )
 
@@ -93,11 +95,12 @@ provide('modal', api)
               leave-to="opacity-0 scale-95"
             >
               <DialogPanel
-                class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all max-h-[85vh]"
+                class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
                 :class="{
                   'h-screen': fullscreen,
                   'max-w-[85vw] rounded-lg': !fullscreen,
                 }"
+                :style="!fullscreen ? { maxHeight } : {}"
               >
                 <slot />
               </DialogPanel>
diff --git a/layouts/default.vue b/layouts/default.vue
index 8843e44..2245b52 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -33,7 +33,7 @@
     :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"></iframe>
   </div>
 
-  <Modal v-model="modalStore.isOpen">
+  <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
       <ModalBody :class="modalStore.aspect">
         <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">