ux(ocr): full-bleed modal on mobile, buttons hug screen edges

@media (max-width: 640px):
- backdrop loses its 1 rem inset; modal goes 100vw × 100vh with
  no border-radius
- crop modal body keeps ~20 px horizontal padding so cropper
  corner handles stay safely outside Android's edge-swipe
  back-gesture zone (the corner DRAG is what triggers it; a tap
  on a button at the edge doesn't)
- camera viewfinder body has zero padding — video fills the
  whole space
- footer has minimal 0.5 rem padding so the rotate / invert /
  cancel / check buttons hug the screen edges
- iOS notch / home-indicator insets honoured via
  env(safe-area-inset-*)

Doesn't change the camera-confirm behaviour — that's the OS-camera
fallback path that fires when getUserMedia is denied for not being
a secure context (i.e. http://lan-ip:8000 from the phone, not
HTTPS or localhost).
This commit is contained in:
João Pedro Battistella Nadas
2026-06-09 19:38:53 +02:00
parent a63b11e467
commit 29226500e8
2 changed files with 36 additions and 0 deletions

View File

@@ -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;