diff --git a/frontend/src/components/MobileEditModal.tsx b/frontend/src/components/MobileEditModal.tsx
index ce49313..9d0f560 100644
--- a/frontend/src/components/MobileEditModal.tsx
+++ b/frontend/src/components/MobileEditModal.tsx
@@ -122,13 +122,23 @@ export function MobileEditModal({
return () => document.removeEventListener("keydown", handleKeyDown);
}, [show, onClose]);
+ // Lock background scroll while modal is open.
+ useEffect(() => {
+ if (!show) return;
+ const previousOverflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.body.style.overflow = previousOverflow;
+ };
+ }, [show]);
+
if (!show) return null;
const currentMed = editingId ? meds.find((m) => m.id === editingId) : null;
return (
{
if (e.key === "Escape") onClose();
@@ -446,14 +456,14 @@ export function MobileEditModal({
{t("form.sections.prescription")}
{form.prescriptionEnabled && (
<>
diff --git a/frontend/src/styles/schedule-mobile-edit.css b/frontend/src/styles/schedule-mobile-edit.css
index e5c6ba5..aa0f8aa 100644
--- a/frontend/src/styles/schedule-mobile-edit.css
+++ b/frontend/src/styles/schedule-mobile-edit.css
@@ -190,11 +190,20 @@
}
/* Mobile Edit Modal */
+.mobile-edit-overlay {
+ align-items: flex-start;
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+}
+
.edit-modal {
max-width: 95vw;
- max-height: 90vh;
- overflow-y: auto;
+ max-height: none;
+ height: min(92dvh, 92vh);
padding: 0.75rem;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
}
.edit-modal-header {
@@ -211,9 +220,24 @@
}
.mobile-edit-form.form-grid {
- display: grid;
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
- gap: 0.75rem 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+}
+
+.mobile-edit-form .readonly-fieldset {
+ display: block;
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
+
+.mobile-edit-form .form-tab-panel.active {
+ display: block;
}
.mobile-edit-form.form-grid > label {