From ffa133261dea53325a48a360fee591e5ef77675a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Battistella=20Nadas?=
 <joao@dexterenergy.ai>
Date: Tue, 9 Jun 2026 19:42:36 +0200
Subject: [PATCH] ux(ocr): one more shot at the mobile modal layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous attempt was actually-broken — typo notwithstanding, the
mix of 100vh, no explicit flex-shrink, and inconsistent body
padding was easy for the body to grow and shove the footer
buttons offscreen.

This pass:
- 100dvh instead of 100vh (mobile chrome / address bar collapses
  don't cause overflow / under-shoot)
- flex-shrink: 0 on .modal-header and .modal-footer so the body
  can never squeeze them out
- explicit background on the footer so it's not transparent
  against whatever's behind
- camera <video> fills modal-body with object-fit: contain
- body padding kept just enough (~16 px) for crop handle safety
---
 static/index.html | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/static/index.html b/static/index.html
index f4220fa..2acff4d 100644
--- a/static/index.html
+++ b/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))