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.

frontend/src/assets/css/main.css

@@ -50,8 +50,16 @@
         @apply border-border;
     }
 
+    html {
+        @apply w-full min-w-0 overflow-x-hidden;
+    }
+
     body {
-        @apply bg-background text-foreground antialiased;
+        @apply min-w-0 overflow-x-hidden bg-background text-foreground antialiased;
+    }
+
+    #app {
+        @apply w-full min-w-0 overflow-x-clip;
     }
 }
 
@@ -71,7 +79,8 @@ body:has(.lightbox:target) {
     z-index: 100;
     align-items: center;
     justify-content: center;
-    padding: 1.5rem;
+    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
+        max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
 }
 
 .lightbox:target {
@@ -87,8 +96,8 @@ body:has(.lightbox:target) {
 .lightbox__img {
     position: relative;
     z-index: 1;
-    max-width: min(95vw, 75rem);
-    max-height: 90vh;
+    max-width: min(100%, 75rem);
+    max-height: min(85dvh, 90vh);
     width: auto;
     height: auto;
     object-fit: contain;
@@ -98,8 +107,8 @@ body:has(.lightbox:target) {
 
 .lightbox__close {
     position: absolute;
-    top: 1rem;
-    right: 1rem;
+    top: max(0.5rem, env(safe-area-inset-top));
+    right: max(0.5rem, env(safe-area-inset-right));
     z-index: 2;
     display: flex;
     align-items: center;