From ebe8b9aa2fbe3c92b3f15a507f905524c2b4dd50 Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Thu, 29 Oct 2026 19:52:47 +0100
Subject: [PATCH] fix app shell layout so footer stays visible on short pages.

Replace min-h-screen on viewer and delete mains with flex-1 inside a growing router outlet.
---
 frontend/src/App.vue                     | 4 +++-
 frontend/src/views/DeleteView.vue        | 2 +-
 frontend/src/views/HotlinkViewerView.vue | 2 +-
 frontend/src/views/ViewerView.vue        | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9cfcb25..f11252c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="flex min-h-screen flex-col bg-background">
         <AppHeader />
-        <router-view />
+        <div class="flex min-h-0 flex-1 flex-col">
+            <router-view />
+        </div>
         <AppFooter />
     </div>
 </template>
diff --git a/frontend/src/views/DeleteView.vue b/frontend/src/views/DeleteView.vue
index d2945c7..baf4318 100644
--- a/frontend/src/views/DeleteView.vue
+++ b/frontend/src/views/DeleteView.vue
@@ -1,5 +1,5 @@
 <template>
-    <main class="mx-auto flex min-h-screen max-w-lg flex-col items-center justify-center gap-3 p-8 text-center">
+    <main class="mx-auto flex max-w-lg flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
         <p v-if="state === 'invalid'" class="text-sm text-muted-foreground">
             This delete link is incomplete. Use the delete URL from your upload results.
         </p>
diff --git a/frontend/src/views/HotlinkViewerView.vue b/frontend/src/views/HotlinkViewerView.vue
index a21f979..cb32a8a 100644
--- a/frontend/src/views/HotlinkViewerView.vue
+++ b/frontend/src/views/HotlinkViewerView.vue
@@ -1,5 +1,5 @@
 <template>
-    <main class="flex min-h-screen items-center justify-center p-4">
+    <main class="flex flex-1 items-center justify-center p-4">
         <img v-if="imageSrc" :src="imageSrc" class="max-h-[80vh] max-w-full object-contain" />
     </main>
 </template>
diff --git a/frontend/src/views/ViewerView.vue b/frontend/src/views/ViewerView.vue
index f46f595..0a310db 100644
--- a/frontend/src/views/ViewerView.vue
+++ b/frontend/src/views/ViewerView.vue
@@ -1,5 +1,5 @@
 <template>
-    <main class="flex min-h-screen items-center justify-center p-4">
+    <main class="flex flex-1 items-center justify-center p-4">
         <p v-if="fetching" class="text-sm text-muted-foreground">Loading image...</p>
 
         <form v-else-if="zkPayload" class="flex w-full max-w-sm flex-col gap-3" @submit.prevent="onUnlockSubmit">