From 01c95658f48c3922b0bb995e9a48b562e6268978 Mon Sep 17 00:00:00 2001
From: averel10 <achille.huenenberger@gmail.com>
Date: Thu, 2 Apr 2026 08:26:33 +0200
Subject: [PATCH] fix: scroll issues

---
 .../AnnotationViews/AnnotationPageView.tsx          |  8 ++++++++
 .../CalibrationViews/CalibrationEntryView.tsx       | 10 ++++++++--
 .../CalibrationViews/CalibrationInfoView.tsx        |  9 +++++++++
 .../CalibrationViews/CalibrationPhase.tsx           | 13 +++++++++++--
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/AnnotationViews/AnnotationPageView.tsx b/src/components/AnnotationViews/AnnotationPageView.tsx
index 1cb6d4e..80d458e 100644
--- a/src/components/AnnotationViews/AnnotationPageView.tsx
+++ b/src/components/AnnotationViews/AnnotationPageView.tsx
@@ -34,6 +34,14 @@ export default function AnnotationPageView({
   const [isCalibrationModalOpen, setIsCalibrationModalOpen] = useState(false);
   const [dialectScores, setDialectScores] = useState<Record<string, number>>({});
 
+  // Scroll to top on component mount
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, []);
+
   // Load calibration scores on component mount
   useEffect(() => {
     const loadScores = async () => {
diff --git a/src/components/CalibrationViews/CalibrationEntryView.tsx b/src/components/CalibrationViews/CalibrationEntryView.tsx
index 16ed204..5afe401 100644
--- a/src/components/CalibrationViews/CalibrationEntryView.tsx
+++ b/src/components/CalibrationViews/CalibrationEntryView.tsx
@@ -49,10 +49,16 @@ export default function CalibrationEntryView({
     setSelectedDialect(existingAnswer?.dialectLabel || null);
     setSelectedConfidence(existingAnswer?.confidence || null);
     setFullyPlayed(existingAnswer ? true : false);
-    // Scroll to top when entry changes with smooth animation
-    window.scrollTo({ top: 0, behavior: 'smooth' });
   }, [entry, existingAnswer]);
 
+  useEffect(() => {
+    // Scroll to top when entry changes
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [entry.id]);
+
   return (
     <div
       className={`border rounded-xl p-5 bg-white shadow-sm transition-colors duration-300 ${
diff --git a/src/components/CalibrationViews/CalibrationInfoView.tsx b/src/components/CalibrationViews/CalibrationInfoView.tsx
index b74f0d3..60212fc 100644
--- a/src/components/CalibrationViews/CalibrationInfoView.tsx
+++ b/src/components/CalibrationViews/CalibrationInfoView.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { useEffect } from 'react';
+
 interface CalibrationInfoViewProps {
   onContinue: () => void;
   hasExistingAnswers: boolean;
@@ -9,6 +11,13 @@ export default function CalibrationInfoView({
   onContinue,
   hasExistingAnswers,
 }: CalibrationInfoViewProps) {
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, []);
+
   const handleContinue = () => {
     onContinue();
   };
diff --git a/src/components/CalibrationViews/CalibrationPhase.tsx b/src/components/CalibrationViews/CalibrationPhase.tsx
index 536f04d..c082080 100644
--- a/src/components/CalibrationViews/CalibrationPhase.tsx
+++ b/src/components/CalibrationViews/CalibrationPhase.tsx
@@ -6,6 +6,13 @@ import { ExperimentCalibration } from '@/lib/model/experiment_calibration';
 import CalibrationPageView from './CalibrationPageView';
 import CalibrationInfoView from './CalibrationInfoView';
 
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+};
+
 interface CalibrationPhaseProps {
   experimentId: number;
 }
@@ -61,12 +68,14 @@ export default function CalibrationPhase({ experimentId }: CalibrationPhaseProps
   if (showInfoPage) {
     return (
       <CalibrationInfoView
-        onContinue={() => setShowInfoPage(false)}
+        onContinue={() => {
+          scrollToTop();
+          setShowInfoPage(false);
+        }}
         hasExistingAnswers={hasExistingAnswers}
       />
     );
   }
 
-  // Show calibration page
   return <CalibrationPageView entries={entries} experimentId={experimentId} />;
 }