From 4275dca83876a0e043809f9d8f31916de2e047ae Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Thu, 12 Feb 2026 21:43:28 +0100
Subject: [PATCH] fix: improve modal scroll lock and e2e script workflow (#156)

---
 backend/package-lock.json            |  4 ++--
 frontend/package.json                |  2 +-
 frontend/src/App.tsx                 | 11 +++--------
 frontend/src/pages/DashboardPage.tsx |  2 +-
 frontend/src/styles.css              | 10 ++++++----
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index e80adca..7f2ab00 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "medassist-ng-backend",
-  "version": "1.9.0",
+  "version": "1.10.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "medassist-ng-backend",
-      "version": "1.9.0",
+      "version": "1.10.2",
       "dependencies": {
         "@fastify/cookie": "^10.0.1",
         "@fastify/cors": "^10.0.1",
diff --git a/frontend/package.json b/frontend/package.json
index d6b989d..33e927d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "test": "vitest",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test",
+    "test:e2e": "rm -rf test-results && playwright test --project=chromium --project=chromium-data --workers=1; find \"$PWD/test-results\" -name video.webm -not -path '*retry*' -print0 | xargs -0 ls -tr | sed \"s/^/file '/\" | sed \"s/$/'/ \" > /tmp/e2e-videos.txt && ffmpeg -y -f concat -safe 0 -i /tmp/e2e-videos.txt -c copy test-results/all-tests.webm && open -a 'Google Chrome' test-results/all-tests.webm",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
     "test:e2e:debug": "playwright test --debug",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c73b335..d599a70 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -322,20 +322,15 @@ function AppContent() {
 	useEffect(() => {
 		const isModalOpen = selectedMed || selectedUser || showProfile || showAbout || showShareDialog;
 		if (isModalOpen) {
-			const scrollY = window.scrollY;
+			document.documentElement.classList.add("modal-open");
 			document.body.classList.add("modal-open");
-			document.body.style.top = `-${scrollY}px`;
 		} else {
-			const scrollY = document.body.style.top;
+			document.documentElement.classList.remove("modal-open");
 			document.body.classList.remove("modal-open");
-			document.body.style.top = "";
-			if (scrollY) {
-				window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
-			}
 		}
 		return () => {
+			document.documentElement.classList.remove("modal-open");
 			document.body.classList.remove("modal-open");
-			document.body.style.top = "";
 		};
 	}, [selectedMed, selectedUser, showProfile, showAbout, showShareDialog]);
 
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 9c88861..3a10f5e 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -21,7 +21,7 @@ function getBlisterStock(totalPills: number, pillsPerBlister: number, _looseTabl
 
 // Helper to format full blisters
 function formatFullBlisters(count: number, t: (key: string) => string): string {
-	return `${count} ${t("common.blisters")}`;
+	return `${count} ${count === 1 ? t("common.blister") : t("common.blisters")}`;
 }
 
 // Helper to format open blister and loose pills
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 79f9d01..26f16e6 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -67,6 +67,7 @@
 }
 html {
 	overflow-x: hidden;
+	background: var(--bg-primary);
 }
 body {
 	margin: 0;
@@ -80,11 +81,9 @@ body {
 		color 200ms ease;
 }
 
+html.modal-open,
 body.modal-open {
 	overflow: hidden !important;
-	position: fixed;
-	width: 100%;
-	height: 100%;
 }
 
 .page {
@@ -3581,9 +3580,12 @@ textarea.auto-resize {
 }
 
 /* User Medications Modal */
-.user-meds-modal {
+.modal-content.user-meds-modal {
 	max-width: 500px;
 	width: 95%;
+	padding: 0;
+	border-radius: 16px;
+	overflow: hidden;
 }
 
 .user-meds-header {