From 5373f8540bc8649f43ad35ea31fdfa8abe57943e Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Thu, 4 Jun 2026 20:50:33 -0700
Subject: [PATCH] Mobile: notification panel fits the screen (override inline
 JS positioning)

toggleNotifPanel positions the panel inline from the bell's rect (panel.style.
right/bottom). The bell isn't flush to the right edge on mobile, so that inline
right offset + near-full-width pushed the panel off-screen left. The existing
mobile rule set right:12px without !important, so it lost to the inline style.
Now anchor both sides with !important (left+right+width:auto) so it always fits.
---
 webui/static/mobile.css | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/webui/static/mobile.css b/webui/static/mobile.css
index 02514fc7..2caa6de5 100644
--- a/webui/static/mobile.css
+++ b/webui/static/mobile.css
@@ -3075,10 +3075,14 @@
 
     /* Notification panel */
     .notif-panel {
-        width: calc(100vw - 24px);
-        max-width: 100%;
-        right: 12px;
-        bottom: 62px;
+        /* JS positions this inline from the bell's rect (right/bottom), which on
+           mobile pushes it off-screen (the bell isn't flush right). Override the
+           inline styles with !important and anchor both sides so it always fits. */
+        left: 12px !important;
+        right: 12px !important;
+        width: auto !important;
+        max-width: none !important;
+        bottom: 62px !important;
         max-height: 55vh;
         border-radius: 14px;
     }
@@ -3186,9 +3190,10 @@
     }
 
     .notif-panel {
-        right: 8px;
-        width: calc(100vw - 16px);
-        bottom: 54px;
+        left: 8px !important;
+        right: 8px !important;
+        width: auto !important;
+        bottom: 54px !important;
     }
 }