danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Mobile: notification panel fits the screen (override inline JS positioning)

Browse source 
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.
This commit is contained in:
BoulderBadgeDad 2026-06-04 20:50:33 -07:00
parent 982653798f
commit 5373f8540b
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
webui/static/mobile.css
View file

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