From e56ee9611d9604206bf679b6e87caee567adb593 Mon Sep 17 00:00:00 2001
From: Samuel Prevost <samuel@infinic.com>
Date: Sun, 26 Apr 2026 17:57:25 +0200
Subject: [PATCH] fix(mobile): stack header, declutter stepper, and reflow
 chrome

The header now stacks on mobile: title row up top, stepper on its own
row below, and the theme toggle moves into the footer's right edge so
it isn't competing for space with the title or stepper. Stepper labels
drop the leading "1." prefix (saves ~8ch across five steps) and the
mobile container has overflow-x-auto so very narrow screens scroll
instead of breaking layout.

Clear-cache button on the upload card collapses to icon-only on mobile
so the centered "Load Source Image" title doesn't sit underneath it;
the confirm state still reads "Sure?" so the destructive prompt is
visible at a glance.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/App.vue                      | 76 ++++++++++++++++++++++----------
 src/components/ImageUpload.vue   | 26 ++++++++---
 src/components/StepIndicator.vue |  8 ++--
 3 files changed, 76 insertions(+), 34 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e8636f7..0877451 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,28 +25,45 @@ const store = useAppStore()
             >Fork me on Gitea</a
         >
 
+        <!-- Header lays out as a single h-14 row on desktop and stacks
+             into title-row + stepper-row on mobile so the title doesn't
+             collide with the stepper at narrow widths. The theme toggle
+             stays in the desktop header but moves into the footer on
+             mobile (see below). -->
         <header
             class="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
         >
-            <div
-                class="mx-auto grid h-14 max-w-7xl grid-cols-3 items-center px-4"
-            >
-                <div><!-- spacer for ribbon --></div>
-                <div class="flex items-center justify-center gap-2">
-                    <SkwikLogo :size="28" />
-                    <h1
-                        class="font-mono text-lg font-semibold tracking-tight"
-                    >
-                        Skwik
-                    </h1>
-                    <span
-                        class="hidden text-[10px] font-medium uppercase tracking-widest text-muted-foreground sm:inline"
-                        >Perspective Correction</span
-                    >
+            <div class="mx-auto max-w-7xl px-4">
+                <div
+                    class="flex items-center justify-between gap-3 py-2 sm:grid sm:h-14 sm:grid-cols-3 sm:py-0"
+                >
+                    <div class="hidden sm:block">
+                        <!-- spacer for the fork-me ribbon -->
+                    </div>
+                    <div class="flex items-center gap-2 sm:justify-center">
+                        <SkwikLogo :size="28" />
+                        <h1
+                            class="font-mono text-lg font-semibold tracking-tight"
+                        >
+                            Skwik
+                        </h1>
+                        <span
+                            class="text-[10px] font-medium uppercase tracking-widest text-muted-foreground"
+                            >Perspective Correction</span
+                        >
+                    </div>
+                    <div class="hidden items-center justify-end gap-4 sm:flex">
+                        <StepIndicator />
+                        <ThemeToggle />
+                    </div>
                 </div>
-                <div class="flex items-center justify-end gap-4">
+                <!-- Mobile-only stepper row. overflow-x-auto keeps the
+                     page width sane if the labels still don't fit on
+                     very narrow screens. -->
+                <div
+                    class="-mx-4 flex justify-center overflow-x-auto px-4 pb-2 sm:hidden"
+                >
                     <StepIndicator />
-                    <ThemeToggle />
                 </div>
             </div>
         </header>
@@ -62,17 +79,28 @@ const store = useAppStore()
             <MeasureViewer v-else-if="store.currentStep === 5" />
         </main>
 
+        <!-- Footer is fixed to the bottom. On mobile we tuck the theme
+             toggle into the right edge so it's reachable without
+             eating into the header chrome; the toggle is absolutely
+             positioned so it doesn't push the centered byline around. -->
         <footer
             class="fixed inset-x-0 bottom-0 z-40 border-t border-border/50 bg-background/95 py-3 text-center text-xs text-muted-foreground backdrop-blur supports-[backdrop-filter]:bg-background/60"
         >
-            Made by
-            <a
-                href="https://github.com/usr-ein"
-                target="_blank"
-                rel="noopener"
-                class="underline underline-offset-2 transition-colors hover:text-foreground"
-                >Samuel Prevost</a
+            <span>
+                Made by
+                <a
+                    href="https://github.com/usr-ein"
+                    target="_blank"
+                    rel="noopener"
+                    class="underline underline-offset-2 transition-colors hover:text-foreground"
+                    >Samuel Prevost</a
+                >
+            </span>
+            <div
+                class="absolute bottom-1/2 right-2 translate-y-1/2 sm:hidden"
             >
+                <ThemeToggle />
+            </div>
         </footer>
     </div>
 </template>
diff --git a/src/components/ImageUpload.vue b/src/components/ImageUpload.vue
index 313d29e..fa4652a 100644
--- a/src/components/ImageUpload.vue
+++ b/src/components/ImageUpload.vue
@@ -296,16 +296,25 @@ function onFileSelect(e: Event) {
                      primary drop target. Two-step confirm: first click
                      arms it; second click within
                      CLEAR_CONFIRM_TIMEOUT_MS commits. -->
+                <!-- Mobile: icon-only when idle, icon + "Sure?" while
+                     confirming so the destructive prompt is unmistakable.
+                     Desktop: full label always (the centered card title
+                     has room beside it). -->
                 <Button
                     v-if="cacheCount > 0"
                     variant="ghost"
                     size="sm"
-                    class="absolute right-2 top-2 h-7 gap-1.5 text-xs"
+                    class="absolute right-2 top-2 h-7 gap-1.5 px-2 text-xs"
                     :class="
                         confirmingClear
                             ? 'text-destructive hover:text-destructive'
                             : 'text-muted-foreground/60 hover:text-destructive'
                     "
+                    :aria-label="
+                        confirmingClear
+                            ? 'Confirm clear cache'
+                            : `Clear cache (${String(cacheCount)})`
+                    "
                     @click="handleClearCacheClick"
                 >
                     <svg
@@ -325,11 +334,16 @@ function onFileSelect(e: Event) {
                         />
                         <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
                     </svg>
-                    {{
-                        confirmingClear
-                            ? "Are you sure?"
-                            : `Clear cache (${String(cacheCount)})`
-                    }}
+                    <span
+                        v-if="confirmingClear"
+                        class="whitespace-nowrap"
+                    >
+                        <span class="hidden sm:inline">Are you sure?</span>
+                        <span class="sm:hidden">Sure?</span>
+                    </span>
+                    <span v-else class="hidden whitespace-nowrap sm:inline">
+                        Clear cache ({{ cacheCount }})
+                    </span>
                 </Button>
                 <CardHeader class="text-center">
                     <CardTitle class="text-lg">Load Source Image</CardTitle>
diff --git a/src/components/StepIndicator.vue b/src/components/StepIndicator.vue
index d9db29e..ae098f6 100644
--- a/src/components/StepIndicator.vue
+++ b/src/components/StepIndicator.vue
@@ -29,10 +29,10 @@ function handleClick(num: AppStep) {
         <template v-for="(step, i) in steps" :key="step.num">
             <button
                 v-if="isReachable(step.num)"
-                class="inline-flex items-center rounded-md border border-border px-2 py-0.5 font-mono text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
+                class="inline-flex shrink-0 items-center rounded-md border border-border px-2 py-0.5 font-mono text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
                 @click="handleClick(step.num)"
             >
-                {{ step.num }}.{{ step.label }}
+                {{ step.label }}
             </button>
             <Badge
                 v-else
@@ -41,13 +41,13 @@ function handleClick(num: AppStep) {
                         ? 'default'
                         : 'outline'
                 "
-                class="cursor-default select-none font-mono text-xs"
+                class="shrink-0 cursor-default select-none font-mono text-xs"
                 :class="{
                     'opacity-40':
                         step.num > store.maxStepReached,
                 }"
             >
-                {{ step.num }}.{{ step.label }}
+                {{ step.label }}
             </Badge>
             <span
                 v-if="i < steps.length - 1"