make upload and metadata UI responsive on mobile.

Improve narrow-viewport layout for upload, About, and shell overflow; keep modal scroll without extra dismiss or a11y markup changes.
2026-10-30 16:23:09 +01:00
parent 938229eeea
commit bb08bb389f
20 changed files with 96 additions and 67 deletions
@@ -1,14 +1,14 @@
 <template>
    <header class="border-b border-border bg-card">
-        <div class="mx-auto flex h-14 max-w-5xl items-center justify-between gap-4 px-4 sm:px-6">
+        <div class="mx-auto flex h-14 max-w-5xl items-center justify-between gap-2 px-3 sm:gap-4 sm:px-6">
            <RouterLink
                :to="{ name: ROUTE_NAMES.Upload }"
-                class="shrink-0 transition-opacity hover:opacity-80"
+                class="min-w-0 shrink transition-opacity hover:opacity-80"
            >
                <img
                    src="/logo.png"
                    alt="Private Image"
-                    class="h-8 w-auto sm:h-9"
+                    class="h-7 w-auto max-w-[min(100%,12rem)] sm:h-8 md:h-9"
                    width="1024"
                    height="228"
                    decoding="async"