From fd3b770a8141c3c96dfba6b9d33bb3bab30a5735 Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sat, 21 Feb 2026 15:24:57 +0100
Subject: [PATCH] fix: improve mobile edit modal scrolling behavior (#247)

---
 frontend/src/components/MobileEditModal.tsx  | 16 +++++++--
 frontend/src/styles/schedule-mobile-edit.css | 34 +++++++++++++++++---
 2 files changed, 42 insertions(+), 8 deletions(-)

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 (
 		<div
-			className="modal-overlay"
+			className="modal-overlay mobile-edit-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
 				if (e.key === "Escape") onClose();
@@ -446,14 +456,14 @@ export function MobileEditModal({
 								<h4 className="form-category-title">{t("form.sections.prescription")}</h4>
 								<label className="full">
 									{t("prescription.enabled")}
-									<label className="toggle-switch small">
+									<span className="toggle-switch small">
 										<input
 											type="checkbox"
 											checked={form.prescriptionEnabled}
 											onChange={(e) => onHandleValueChange("prescriptionEnabled", e.target.checked)}
 										/>
 										<span className="toggle-slider"></span>
-									</label>
+									</span>
 								</label>
 								{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 {