fix: Scroll notifications to top on open

app/components/Notifications/NotificationsButton.tsx

@@ -9,7 +9,7 @@ import Notifications from "./Notifications";
 
 const NotificationsButton: React.FC = ({ children }) => {
   const { t } = useTranslation();
-  const focusRef = React.useRef<HTMLDivElement>(null);
+  const scrollableRef = React.useRef<HTMLDivElement>(null);
 
   const popover = usePopoverState({
     gutter: 0,
@@ -17,6 +17,13 @@ const NotificationsButton: React.FC = ({ children }) => {
     unstable_fixed: true,
   });
 
+  // Reset scroll position to the top when popover is opened
+  React.useEffect(() => {
+    if (popover.visible && scrollableRef.current) {
+      scrollableRef.current.scrollTop = 0;
+    }
+  }, [popover.visible]);
+
   return (
     <>
       <PopoverDisclosure {...popover}>{children}</PopoverDisclosure>
@@ -25,11 +32,11 @@ const NotificationsButton: React.FC = ({ children }) => {
         scrollable={false}
         mobilePosition="bottom"
         aria-label={t("Notifications")}
-        unstable_initialFocusRef={focusRef}
+        unstable_initialFocusRef={scrollableRef}
         shrink
         flex
       >
-        <Notifications onRequestClose={popover.hide} ref={focusRef} />
+        <Notifications onRequestClose={popover.hide} ref={scrollableRef} />
       </StyledPopover>
     </>
   );