From b6eaacb9f93e011192688015a711cc95944936db Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 7 Mar 2026 18:31:03 -0500
Subject: [PATCH] fix: scroll to top on survey slide change via useEffect

requestAnimationFrame was still too early. Use a useEffect on
currentSlide so the scroll fires after React commits the new
slide to the DOM. Skips initial render to avoid scroll on load.

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

diff --git a/frontend/src/pages/SurveyPage.tsx b/frontend/src/pages/SurveyPage.tsx
index 44c0d507..acb8e5ce 100644
--- a/frontend/src/pages/SurveyPage.tsx
+++ b/frontend/src/pages/SurveyPage.tsx
@@ -188,11 +188,18 @@ export default function SurveyPage() {
 
   const goSlide = (idx: number) => {
     setCurrentSlide(idx)
-    requestAnimationFrame(() => {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-    })
   }
 
+  // Scroll to top whenever the active slide changes
+  const isFirstRender = useRef(true)
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      return
+    }
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }, [currentSlide])
+
   const handleSubmit = async () => {
     setIsSubmitting(true)
     setSubmitError('')