Merge pull request 'fix(admin): keep a modal's controls on screen on a phone (#314)' (#316) from bugfix/314-admin-modal-unclosable-on-phone into main

Reviewed-on: #316

frontend/src/styles.css

@@ -168,3 +168,37 @@ body { margin: 0; }
   flex: 1;
   min-width: 0;
 }
+
+/* Admin overlays on a phone.
+
+   antd treats a Modal's `width` as a fixed pixel value and does not adapt it to
+   the viewport, so the item editor's `width={720}` in Admin.tsx still lays out
+   at 720px on a ~390px screen. The footer's OK and Cancel are right-aligned
+   inside that 720px and the close X sits in its top-right corner, so all three
+   land off-screen — and antd sets `overflow: hidden` on the body while a modal
+   is open, so the page behind cannot be scrolled to reach them either. That
+   left a dialog with no way out except the browser's back button (#314).
+
+   Capped here rather than at each call site so that `Modal.confirm`, which has
+   no call site to edit, is covered by the same rule. `max-width` beats the
+   inline `width` antd writes on the element, so none of this needs
+   `!important`. */
+@media (max-width: 767px) {
+  .ant-modal {
+    max-width: calc(100vw - 16px);
+    margin: 8px auto;
+    top: 8px;
+  }
+
+  /* The footer is a sibling of the body, not inside it, so bounding the body is
+     what keeps OK and Cancel on screen: a tall form scrolls within the modal
+     instead of pushing the footer past the bottom of the viewport. */
+  .ant-modal-body {
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  .ant-drawer-content-wrapper {
+    max-width: 100vw;
+  }
+}