From 2866901187ce05ac64982c8d86dbd5dde96b1034 Mon Sep 17 00:00:00 2001 From: synAdmin Date: Sun, 6 Sep 2026 07:39:07 -0500 Subject: [PATCH] fix(admin): keep a modal's controls on screen on a phone (#314) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 laid out at 720px on a roughly 390px screen. The footer's OK and Cancel are right-aligned inside that width and the close X sits in the modal's top-right corner, so all three ended up off-screen, and antd sets `overflow: hidden` on the body while a modal is open, so the page behind could not be scrolled to reach them either. The dialog had no way out short of the browser's back button. Capped in styles.css rather than at each call site, because `Modal.confirm` — used by the review queue when publishing at a price nobody chose — has no call site to edit and would have been left broken by a per-modal fix. The same rule covers the 640 and 480 widths in Customers.tsx and the preview drawer, all of which overflow a phone for the same reason. `max-width` beats the inline `width` antd writes on the element, so none of it needs `!important`. Bounding `.ant-modal-body` rather than the modal is what actually keeps the buttons reachable: the footer is a sibling of the body, not a child, so a tall form scrolls inside the modal while the footer stays where it is. Sizing the modal alone would have moved the overflow rather than removed it. Verified in the built bundle rather than only in source — `@media (max-width: 767px)` and all three rules are present in dist after a production build, which is the step that distinguishes a fix that shipped from one that merely compiled. Not verified visually on a device: this is a layout change with no unit coverage, and the five overlays worth checking at 390x844 are listed on the issue. MDEditor's `preview="live"` still splits the pane in two and is cramped at this width. That is a behaviour change rather than a layout fix and is deliberately left out; it is recorded on the issue instead. Closes #314 Co-Authored-By: Claude Opus 5 (1M context) --- frontend/src/styles.css | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/frontend/src/styles.css b/frontend/src/styles.css index a222c88..04db071 100755 --- a/frontend/src/styles.css +++ b/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; + } +}