From b93dcf151db5a99da7db749be357cb5b3efbede2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 7 Nov 2025 07:45:07 -0600
Subject: [PATCH] add optional ref to always scroll to top

the more filters in explore was not scrolled to the top on open due to the use of framer motion
---
 web/src/components/mobile/MobilePage.tsx       | 18 +++++++++++++++++-
 .../overlay/dialog/PlatformAwareDialog.tsx     | 13 +++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/web/src/components/mobile/MobilePage.tsx b/web/src/components/mobile/MobilePage.tsx
index b5084d65a..a4b80b2cb 100644
--- a/web/src/components/mobile/MobilePage.tsx
+++ b/web/src/components/mobile/MobilePage.tsx
@@ -4,6 +4,7 @@ import {
   useEffect,
   useState,
   useCallback,
+  useRef,
 } from "react";
 import { createPortal } from "react-dom";
 import { motion, AnimatePresence } from "framer-motion";
@@ -121,17 +122,20 @@ export function MobilePagePortal({
 type MobilePageContentProps = {
   children: React.ReactNode;
   className?: string;
+  scrollerRef?: React.RefObject<HTMLDivElement>;
 };
 
 export function MobilePageContent({
   children,
   className,
+  scrollerRef,
 }: MobilePageContentProps) {
   const context = useContext(MobilePageContext);
   if (!context)
     throw new Error("MobilePageContent must be used within MobilePage");
 
   const [isVisible, setIsVisible] = useState(context.open);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (context.open) {
@@ -140,15 +144,27 @@ export function MobilePageContent({
   }, [context.open]);
 
   const handleAnimationComplete = () => {
-    if (!context.open) {
+    if (context.open) {
+      // After opening animation completes, ensure scroller is at the top
+      if (scrollerRef?.current) {
+        scrollerRef.current.scrollTop = 0;
+      }
+    } else {
       setIsVisible(false);
     }
   };
 
+  useEffect(() => {
+    if (context.open && scrollerRef?.current) {
+      scrollerRef.current.scrollTop = 0;
+    }
+  }, [context.open, scrollerRef]);
+
   return (
     <AnimatePresence>
       {isVisible && (
         <motion.div
+          ref={containerRef}
           className={cn(
             "fixed inset-0 z-50 mb-12 bg-background",
             isPWA && "mb-16",
diff --git a/web/src/components/overlay/dialog/PlatformAwareDialog.tsx b/web/src/components/overlay/dialog/PlatformAwareDialog.tsx
index 62ee4b1f9..ab69e1288 100644
--- a/web/src/components/overlay/dialog/PlatformAwareDialog.tsx
+++ b/web/src/components/overlay/dialog/PlatformAwareDialog.tsx
@@ -22,6 +22,7 @@ import {
 } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
 import { isMobile } from "react-device-detect";
+import { useRef } from "react";
 
 type PlatformAwareDialogProps = {
   trigger: JSX.Element;
@@ -80,6 +81,8 @@ export function PlatformAwareSheet({
   open,
   onOpenChange,
 }: PlatformAwareSheetProps) {
+  const scrollerRef = useRef<HTMLDivElement>(null);
+
   if (isMobile) {
     return (
       <MobilePage open={open} onOpenChange={onOpenChange}>
@@ -87,14 +90,20 @@ export function PlatformAwareSheet({
           {trigger}
         </MobilePageTrigger>
         <MobilePagePortal>
-          <MobilePageContent className="flex h-full flex-col">
+          <MobilePageContent
+            className="flex h-full flex-col"
+            scrollerRef={scrollerRef}
+          >
             <MobilePageHeader
               className="mx-2"
               onClose={() => onOpenChange(false)}
             >
               <MobilePageTitle>{title}</MobilePageTitle>
             </MobilePageHeader>
-            <div className={cn("flex-1 overflow-y-auto", contentClassName)}>
+            <div
+              ref={scrollerRef}
+              className={cn("flex-1 overflow-y-auto", contentClassName)}
+            >
               {content}
             </div>
           </MobilePageContent>