fix(ui): uses CSS scrollbar-width var for navbar compensation

Author: wgordon17

src/app/components/shared/NotificationDrawer.tsx

@@ -25,7 +25,7 @@ export default function NotificationDrawer(props: NotificationDrawerProps) {
   }
 
   return (
-    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()} modal preventScroll={false}>
+    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()} modal>
       <Dialog.Portal>
         <Dialog.Overlay class="drawer-overlay fixed inset-0 bg-black/50 z-[70]" data-testid="notification-overlay" />
         <Dialog.Content class="drawer-content fixed top-0 right-0 h-full w-80 sm:w-96 bg-base-100 shadow-xl z-[71] flex flex-col">

src/app/index.css

@@ -107,6 +107,13 @@
   animation: overlay-fade-in 0.3s ease-out forwards;
 }
 
+/* ── Fixed-element scrollbar compensation ────────────────────────────────── */
+/* solid-prevent-scroll sets --scrollbar-width on body when scroll is locked;
+   fixed elements don't inherit body padding-right, so compensate explicitly */
+.navbar {
+  padding-right: var(--scrollbar-width, 0px);
+}
+
 /* ── Kobalte → daisyUI bridges ───────────────────────────────────────────── */
 
 /* Kobalte Tabs: data-selected → daisyUI tab-active */