From 9d9df9f0b8a2c5254841c7136d58bd4bf67702f7 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 7 Mar 2026 18:36:04 -0500
Subject: [PATCH] fix: survey scroll-to-top on mobile using scrollIntoView

Mobile browsers (iOS Safari especially) ignore window.scrollTo.
Use scrollIntoView on a ref at the top of the page instead,
which works reliably across mobile and desktop browsers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/SurveyPage.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/SurveyPage.tsx b/frontend/src/pages/SurveyPage.tsx
index acb8e5ce..bc25bd2c 100644
--- a/frontend/src/pages/SurveyPage.tsx
+++ b/frontend/src/pages/SurveyPage.tsx
@@ -186,18 +186,26 @@ export default function SurveyPage() {
   }, 0)
   const progressPct = Math.round((answeredCount / TOTAL_QUESTIONS) * 100)
 
+  const topRef = useRef<HTMLDivElement>(null)
+
   const goSlide = (idx: number) => {
     setCurrentSlide(idx)
   }
 
-  // Scroll to top whenever the active slide changes
+  // Scroll to top whenever the active slide changes — mobile browsers
+  // (especially iOS Safari) ignore window.scrollTo, so we use
+  // scrollIntoView on a ref at the top of the page as primary method
   const isFirstRender = useRef(true)
   useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false
       return
     }
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    if (topRef.current) {
+      topRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
   }, [currentSlide])
 
   const handleSubmit = async () => {
@@ -296,7 +304,7 @@ export default function SurveyPage() {
   }
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div ref={topRef} className="min-h-screen bg-background text-foreground">
       <PageMeta
         title="Product Survey"
         description="Help shape the future of ResolutionFlow by sharing your feedback"