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; }; 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(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 ( {isVisible && ( (null); + if (isMobile) { return ( @@ -87,14 +90,20 @@ export function PlatformAwareSheet({ {trigger} - + onOpenChange(false)} > {title} -
+
{content}