fix: prevent background scroll when any modal is open (#284)

Replace CSS-only modal-open class toggle with a shared useScrollLock
hook that uses position:fixed + scroll position save/restore. This
reliably prevents background scrolling on all browsers including
iOS Safari.

The hook supports nesting (lock counter) so stacked modals (e.g.
MedDetail → RefillModal) work correctly.

Also adds missing modal states to the scroll lock: showRefillModal,
showEditStockModal, showImageLightbox, scheduleLightboxImage.

Replaces the inline 40-line scroll lock in MobileEditModal with the
shared hook.

frontend/src/App.tsx

@@ -12,6 +12,7 @@ import {
 import { AppHeader } from "./components/AppHeader";
 import { AuthPage, AuthProvider, useAuth } from "./components/Auth";
 import { AppProvider, UnsavedChangesProvider, useAppContext } from "./context";
+import { useScrollLock } from "./hooks/useScrollLock";
 import { DashboardPage, MedicationsPage, PlannerPage, SchedulePage, SettingsPage } from "./pages";
 
 // Vite injects this at build time from package.json
@@ -340,21 +341,20 @@ function AppContent() {
 		};
 	}, []);
 
-	// Prevent background scroll when modal is open
-	useEffect(() => {
-		const isModalOpen = selectedMed || selectedUser || showProfile || showAbout || showShareDialog;
-		if (isModalOpen) {
-			document.documentElement.classList.add("modal-open");
-			document.body.classList.add("modal-open");
-		} else {
-			document.documentElement.classList.remove("modal-open");
-			document.body.classList.remove("modal-open");
-		}
-		return () => {
-			document.documentElement.classList.remove("modal-open");
-			document.body.classList.remove("modal-open");
-		};
-	}, [selectedMed, selectedUser, showProfile, showAbout, showShareDialog]);
+	// Prevent background scroll when any modal is open
+	useScrollLock(
+		!!(
+			selectedMed ||
+			selectedUser ||
+			showProfile ||
+			showAbout ||
+			showShareDialog ||
+			showRefillModal ||
+			showEditStockModal ||
+			showImageLightbox ||
+			scheduleLightboxImage
+		)
+	);
 
 	// Update selectedMed when meds change (e.g., after refill)
 	useEffect(() => {