fix: Scroll notifications to top on open

app/components/Notifications/Notifications.tsx

@@ -37,7 +37,7 @@ function Notifications(
   const isEmpty = notifications.orderedData.length === 0;
 
   return (
-    <Flex style={{ width: "100%" }} ref={ref} column>
+    <Flex style={{ width: "100%" }} column>
       <Header justify="space-between">
         <Text weight="bold" as="span">
           {t("Notifications")}
@@ -57,7 +57,7 @@ function Notifications(
           </Tooltip>
         </Text>
       </Header>
-      <Scrollable flex topShadow>
+      <Scrollable ref={ref} flex topShadow>
         <PaginatedList
           fetch={notifications.fetchPage}
           items={notifications.orderedData}

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>
     </>
   );