static/index.html

@@ -300,7 +300,7 @@
     }
 
     /* On mobile: full-bleed modal, buttons hug the screen edges. Body padding
-       still ~20 px so cropper corner handles stay outside Android's edge-swipe
+       still ~16 px so cropper corner handles stay outside Android's edge-swipe
        gesture zone — tapping a button doesn't trigger it, but dragging into
        the very edge does. */
     @media (max-width: 640px) {
@@ -308,24 +308,35 @@
       .modal {
         width: 100vw;
         max-width: 100vw;
-        height: 100vh;
-        max-height: 100vh;
+        height: 100dvh;       /* dynamic viewport — accounts for mobile browser chrome */
+        max-height: 100dvh;
+        border: 0;
         border-radius: 0;
       }
       .modal-header {
+        flex-shrink: 0;       /* never get squeezed out by the body */
         padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
       }
       .modal-body {
+        flex: 1 1 auto;
+        min-height: 0;
         padding:
-          1rem
-          max(1.25rem, env(safe-area-inset-right, 0px))
-          1rem
-          max(1.25rem, env(safe-area-inset-left, 0px));
+          0.5rem
+          max(1rem, env(safe-area-inset-right, 0px))
+          0.5rem
+          max(1rem, env(safe-area-inset-left, 0px));
         max-height: none;
       }
       .cam-body { padding: 0 !important; }
-      .cam-body video { max-height: none; }
+      .cam-body video {
+        width: 100%;
+        height: 100%;
+        max-height: none;
+        object-fit: contain;
+      }
       .modal-footer {
+        flex-shrink: 0;
+        background: var(--bg);   /* explicit so it always reads clearly */
         padding:
           0.5rem
           max(0.5rem, env(safe-area-inset-right, 0px))