From 6e9f859d59dcae1353f13235f315b55df0a5e3a3 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 18:53:35 +0100
Subject: [PATCH] Make mobile and desktop behave identically

- Remove isMobile() function from IconButton and works page
- Remove mobile-specific conditionals for score and document icons
- Always show nav and score iframe on works page
- No more hydration mismatch - same HTML on server and client
---
 components/IconButton.vue | 28 ++++------------------------
 pages/works/[slug].vue    | 14 ++------------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 2572744..1e8cf2f 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,17 +2,10 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <!-- Score: Mobile = PDF (downloads), Desktop = work page with hash (opens modal) -->
-            <span v-if="type === 'score' && isMobile()">
-                <a :href="scoreLink" class="inline-flex p-1">
-                    <Icon name="ion:book-sharp" style="color: white" />
-                </a>
-            </span>
-            <span v-else-if="type === 'score'">
-                <button @click="openWithHash('score')" class="inline-flex p-1">
-                    <Icon name="ion:book-sharp" style="color: white" />
-                </button>
-            </span>
+            <!-- Score: Always opens modal -->
+            <button v-if="type === 'score'" @click="openWithHash('score')" class="inline-flex p-1">
+                <Icon name="ion:book-sharp" style="color: white" />
+            </button>
 
             <!-- Document: Mobile = External opens new tab, PDF downloads, internal pages open modal -->
             <span v-if="type === 'document'">
@@ -66,14 +59,6 @@
 
   const workSlug = computed(() => slugify(props.work?.title))
 
-  const scoreLink = computed(() => {
-    if (!props.work?.score) return null
-    if (props.work.score.startsWith('/scores/')) {
-      return props.work.score
-    }
-    return '/scores/' + props.work.score
-  })
-
   const isExternalLink = computed(() => {
     return props.link && !props.link.endsWith('.pdf') && !props.link.startsWith('/')
   })
@@ -82,11 +67,6 @@
     return props.link && props.link.startsWith('/') && !props.link.endsWith('.pdf')
   })
 
-  const isMobile = () => {
-    if (typeof window === 'undefined') return false
-    return window.innerWidth < 768
-  }
-
   const openDocument = () => {
     if (props.link?.endsWith('.pdf')) {
       modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link)
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index a4874c8..0369081 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -8,12 +8,7 @@
           <nav class="flex gap-4 mb-6">
             <a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
             <a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
-            <span v-if="scoreUrl && isMobile()">
-              <a :href="scoreUrl" class="hover:underline">Score</a>
-            </span>
-            <span v-else-if="scoreUrl">
-              <a href="#score" class="hover:underline">Score</a>
-            </span>
+            <a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
           </nav>
         </div>
       </div>
@@ -27,7 +22,7 @@
           <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
         </div>
         
-        <div id="score" v-if="scoreUrl && !isMobile()" class="mb-8 scroll-mt-[280px]">
+        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px]">
           <iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
         </div>
       </div>
@@ -82,11 +77,6 @@ const itemCount = computed(() => {
   return count
 })
 
-const isMobile = () => {
-  if (typeof window === 'undefined') return false
-  return window.innerWidth < 768
-}
-
 onMounted(() => {
   if (work.value?.soundcloud_trackid) {
     audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)