From 2290040242f6e737b41bfab7212006e756820965 Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Tue, 3 Nov 2026 16:30:14 +0100
Subject: [PATCH] Improve ZK and hotlink viewer image layout and add
 open-full-image link.

Share ViewerImageDisplay with viewport-aware sizing so wide panoramas are not capped at max-w-lg.
---
 frontend/src/components.d.ts                  |  1 +
 .../components/viewer/ViewerImageDisplay.vue  | 40 +++++++++++++++++++
 frontend/src/views/HotlinkViewerView.vue      |  9 ++---
 frontend/src/views/ZkViewerView.vue           |  7 +---
 4 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/viewer/ViewerImageDisplay.vue

diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts
index 3893ad8..2c9b76e 100644
--- a/frontend/src/components.d.ts
+++ b/frontend/src/components.d.ts
@@ -28,5 +28,6 @@ declare module 'vue' {
     UploadQueueList: typeof import('./components/upload/UploadQueueList.vue')['default']
     UploadSettingsPanel: typeof import('./components/upload/UploadSettingsPanel.vue')['default']
     UploadShareResults: typeof import('./components/upload/UploadShareResults.vue')['default']
+    ViewerImageDisplay: typeof import('./components/viewer/ViewerImageDisplay.vue')['default']
   }
 }
diff --git a/frontend/src/components/viewer/ViewerImageDisplay.vue b/frontend/src/components/viewer/ViewerImageDisplay.vue
new file mode 100644
index 0000000..01a855b
--- /dev/null
+++ b/frontend/src/components/viewer/ViewerImageDisplay.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="flex w-full min-h-0 flex-col items-center justify-center gap-3 text-center">
+        <img
+            :src="src"
+            decoding="async"
+            class="mx-auto block h-auto w-auto max-h-[min(calc(100dvh-12rem),calc(100vh-12rem))] max-w-[min(100%,calc(100vw-2rem))] object-contain"
+            :class="{ hidden: visuallyHidden }"
+            @load="emit('load')"
+            @error="emit('error')"
+        />
+
+        <a
+            v-if="!visuallyHidden"
+            :href="src"
+            class="text-sm text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
+            rel="noopener noreferrer"
+            target="_blank"
+        >
+            Open full image
+        </a>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    src: {
+        type: String,
+        required: true
+    },
+    visuallyHidden: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits<{
+    load: [];
+    error: [];
+}>();
+</script>
diff --git a/frontend/src/views/HotlinkViewerView.vue b/frontend/src/views/HotlinkViewerView.vue
index fea1ca8..72044e1 100644
--- a/frontend/src/views/HotlinkViewerView.vue
+++ b/frontend/src/views/HotlinkViewerView.vue
@@ -1,7 +1,5 @@
 <template>
-    <main
-        class="mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center gap-3 px-4 py-6 text-center sm:px-6 sm:py-8"
-    >
+    <main class="flex min-h-0 w-full flex-1 flex-col items-center justify-center px-4 py-4 sm:px-6">
         <p v-if="state === 'invalidLink'" class="text-sm text-muted-foreground">
             This viewing link is incomplete. Use the hotlink URL from your upload results.
         </p>
@@ -11,11 +9,10 @@
         <template v-else>
             <p v-if="state === 'loading'" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
 
-            <img
+            <ViewerImageDisplay
                 v-if="imageSrc"
                 :src="imageSrc"
-                class="max-h-[min(80vh,100dvh)] w-full object-contain"
-                :class="{ hidden: state === 'loading' }"
+                :visually-hidden="state === 'loading'"
                 @load="onImageLoad"
                 @error="onImageError"
             />
diff --git a/frontend/src/views/ZkViewerView.vue b/frontend/src/views/ZkViewerView.vue
index 371f92e..348cddc 100644
--- a/frontend/src/views/ZkViewerView.vue
+++ b/frontend/src/views/ZkViewerView.vue
@@ -1,7 +1,5 @@
 <template>
-    <main
-        class="mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center gap-3 px-4 py-6 text-center sm:px-6 sm:py-8"
-    >
+    <main class="flex min-h-0 w-full flex-1 flex-col items-center justify-center px-4 py-4 sm:px-6">
         <p v-if="state === 'loading'" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
 
         <p v-else-if="state === 'invalidLink'" class="text-sm text-muted-foreground">
@@ -37,10 +35,9 @@
             </button>
         </form>
 
-        <img
+        <ViewerImageDisplay
             v-else-if="state === 'image' && imageObjectUrl"
             :src="imageObjectUrl"
-            class="max-h-[min(80vh,100dvh)] w-full object-contain"
         />
     </main>
 </template>