CHANGELOG.md

@@ -25,6 +25,7 @@ Versioning: [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### Added
 - Camera viewfinder modal on mobile (via `navigator.mediaDevices.getUserMedia` with `facingMode: environment`) — replaces the `<input type=file capture>` flow. Tapping the shutter goes directly to the crop modal, skipping the OS-level "retake / use" confirm step. Falls back to the file picker if camera access is denied or unavailable; a "Pick from file" icon (`photo_library`) inside the camera modal also routes to the picker on demand.
 - Invert-colours toggle (`invert_colors`) in the crop modal. Tap to flip light-on-dark text into the dark-on-light polarity Tesseract expects. The grayscale buffer is inverted before adaptive thresholding so the binarised output is correct.
+- Mobile-first modal layout (≤ 640 px): the crop and camera modals now fill the viewport (no backdrop padding, no border-radius), buttons hug the screen edges in the footer, and the camera video occupies the entire body. Body still has ~20 px horizontal padding so cropper's corner handles stay outside Android's edge-swipe back-gesture zone. iOS notch / home-bar insets honoured.
 
 ### Fixed
 - "Hot: …" status no longer claims "unloads in X" when the server's `keep_alive` is `-1` (Ollama returns an absurd year-4001 `expires_at`). Threshold: any expiry >7 days drops the suffix and just shows the model name.

static/index.html

@@ -299,6 +299,41 @@
       display: block;
     }
 
+    /* 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
+       gesture zone — tapping a button doesn't trigger it, but dragging into
+       the very edge does. */
+    @media (max-width: 640px) {
+      .modal-backdrop { padding: 0; }
+      .modal {
+        width: 100vw;
+        max-width: 100vw;
+        height: 100vh;
+        max-height: 100vh;
+        border-radius: 0;
+      }
+      .modal-header {
+        padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
+      }
+      .modal-body {
+        padding:
+          1rem
+          max(1.25rem, env(safe-area-inset-right, 0px))
+          1rem
+          max(1.25rem, env(safe-area-inset-left, 0px));
+        max-height: none;
+      }
+      .cam-body { padding: 0 !important; }
+      .cam-body video { max-height: none; }
+      .modal-footer {
+        padding:
+          0.5rem
+          max(0.5rem, env(safe-area-inset-right, 0px))
+          max(0.5rem, env(safe-area-inset-bottom, 0px))
+          max(0.5rem, env(safe-area-inset-left, 0px));
+      }
+    }
+
     /* CodeMirror editor host — matches .output styling so input & output align */
     .cm-editor {
       min-height: 180px;