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

@@ -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']
   }
 }

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>

frontend/src/views/HotlinkViewerView.vue

@@ -1,7 +1,5 @@
 <template>
-    <main
+    <main class="flex min-h-0 w-full flex-1 flex-col items-center justify-center px-4 py-4 sm:px-6">
-        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"
-    >
         <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"
+                :visually-hidden="state === 'loading'"
-                :class="{ hidden: state === 'loading' }"
                 @load="onImageLoad"
                 @error="onImageError"
             />

frontend/src/views/ZkViewerView.vue

@@ -1,7 +1,5 @@
 <template>
-    <main
+    <main class="flex min-h-0 w-full flex-1 flex-col items-center justify-center px-4 py-4 sm:px-6">
-        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"
-    >
         <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>