From 06e69316ad97f91c68005b25954918c21390a757 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 19:02:10 +0100
Subject: [PATCH] Add score modal functionality and simplify modal sizing

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

diff --git a/layouts/default.vue b/layouts/default.vue
index 9e03b4e..77b01f2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -106,9 +106,9 @@
             <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-[70vh]">
+        <div v-if="modalStore.type === 'pdf'" class="w-full h-full flex flex-col">
           <ClientOnly>
-            <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
+            <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-1"></iframe>
           </ClientOnly>
           <div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
             <ClientOnly>
diff --git a/pages/pieces.vue b/pages/pieces.vue
index 04febe9..e707f9f 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -28,9 +28,9 @@
               <button v-if="work.gallery" @click="openImageModal(work)" class="hover:underline">
                 images
               </button>
-              <a v-if="work.score" :href="work.score" target="_blank" class="hover:underline">
+              <button v-if="work.score" @click="openScoreModal(work.score)" class="hover:underline">
                 score
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -86,6 +86,10 @@ const openVideoModal = (vimeoId) => {
   modalStore.setModalProps('video', 'aspect-video', true, '', '', vimeoId)
 }
 
+const openScoreModal = (scoreUrl) => {
+  modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', scoreUrl)
+}
+
 const openImageModal = (work) => {
   const gallery = work.images.map(img => ({ image: img.filename }))
   modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '', '', '', '', 0)