From f47470c85119f66ea4beff1c318166835bd6c4b3 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 11:05:50 +0100
Subject: [PATCH] Simplify modal layout and reduce pieces page font size

---
 layouts/default.vue | 29 ++++++++++++++++++++---------
 pages/pieces.vue    |  4 ++--
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index b8f3832..b055379 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -68,26 +68,37 @@
     </footer>
 
     <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
-      <ModalBody :class="modalStore.aspect">
+      <div class="flex flex-col h-full overflow-hidden">
         <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageSlider>
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
           <ClientOnly>
             <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="modalStore.aspect" class="w-full h-full flex items-center justify-center p-4">
-          <ClientOnly>
-            <iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="max-w-full max-h-full"></iframe>
-          </ClientOnly>
+        <div v-if="modalStore.type === 'video'" class="w-full flex items-center justify-center p-4">
+          <div class="w-full aspect-video">
+            <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"
+              ></iframe>
+            </ClientOnly>
+          </div>
         </div>
-        <div v-if="modalStore.type === 'document'" class="w-full flex flex-col" style="height: calc(85vh - 4rem)">
+        <div v-if="modalStore.type === 'document'" class="w-full flex flex-col h-[70vh]">
           <ClientOnly>
             <iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
           </ClientOnly>
         </div>
-        <div v-if="modalStore.type === 'pdf'" class="flex flex-col h-full">
+        <div v-if="modalStore.type === 'pdf'" class="flex flex-col h-[70vh]">
           <ClientOnly>
-            <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" :class="[modalStore.soundcloudUrl ? 'max-h-[calc(85vh-60px)]' : 'max-h-[calc(85vh-2rem)]', 'flex-grow']"></iframe>
+            <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
           </ClientOnly>
           <div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
             <ClientOnly>
@@ -100,7 +111,7 @@
             <Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
           </a>
         </div>
-      </ModalBody>
+      </div>
     </Modal>
   </div>
 </template>
diff --git a/pages/pieces.vue b/pages/pieces.vue
index e2580e3..04febe9 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -9,11 +9,11 @@
               <NuxtLink 
                 v-if="hasItems(work)" 
                 :to="'/works/' + slugify(work.title)" 
-                class="text-lg italic hover:underline"
+                class="text-base italic hover:underline"
               >
                 <span v-html="work.title"></span>
               </NuxtLink>
-              <span v-else class="text-lg italic">
+              <span v-else class="text-base italic">
                 <span v-html="work.title"></span>
               </span>
             </div>