fix: scroll issues

This commit is contained in:
averel10
2026-04-02 08:26:33 +02:00
parent bdbfe04e7e
commit 01c95658f4
4 changed files with 36 additions and 4 deletions

View File

@@ -34,6 +34,14 @@ export default function AnnotationPageView({
const [isCalibrationModalOpen, setIsCalibrationModalOpen] = useState(false); const [isCalibrationModalOpen, setIsCalibrationModalOpen] = useState(false);
const [dialectScores, setDialectScores] = useState<Record<string, number>>({}); 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 // Load calibration scores on component mount
useEffect(() => { useEffect(() => {
const loadScores = async () => { const loadScores = async () => {

View File

@@ -49,10 +49,16 @@ export default function CalibrationEntryView({
setSelectedDialect(existingAnswer?.dialectLabel || null); setSelectedDialect(existingAnswer?.dialectLabel || null);
setSelectedConfidence(existingAnswer?.confidence || null); setSelectedConfidence(existingAnswer?.confidence || null);
setFullyPlayed(existingAnswer ? true : false); setFullyPlayed(existingAnswer ? true : false);
// Scroll to top when entry changes with smooth animation
window.scrollTo({ top: 0, behavior: 'smooth' });
}, [entry, existingAnswer]); }, [entry, existingAnswer]);
useEffect(() => {
// Scroll to top when entry changes
window.scrollTo({
top: 0,
behavior: 'smooth',
});
}, [entry.id]);
return ( return (
<div <div
className={`border rounded-xl p-5 bg-white shadow-sm transition-colors duration-300 ${ className={`border rounded-xl p-5 bg-white shadow-sm transition-colors duration-300 ${

View File

@@ -1,5 +1,7 @@
'use client'; 'use client';
import { useEffect } from 'react';
interface CalibrationInfoViewProps { interface CalibrationInfoViewProps {
onContinue: () => void; onContinue: () => void;
hasExistingAnswers: boolean; hasExistingAnswers: boolean;
@@ -9,6 +11,13 @@ export default function CalibrationInfoView({
onContinue, onContinue,
hasExistingAnswers, hasExistingAnswers,
}: CalibrationInfoViewProps) { }: CalibrationInfoViewProps) {
useEffect(() => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
}, []);
const handleContinue = () => { const handleContinue = () => {
onContinue(); onContinue();
}; };

View File

@@ -6,6 +6,13 @@ import { ExperimentCalibration } from '@/lib/model/experiment_calibration';
import CalibrationPageView from './CalibrationPageView'; import CalibrationPageView from './CalibrationPageView';
import CalibrationInfoView from './CalibrationInfoView'; import CalibrationInfoView from './CalibrationInfoView';
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
interface CalibrationPhaseProps { interface CalibrationPhaseProps {
experimentId: number; experimentId: number;
} }
@@ -61,12 +68,14 @@ export default function CalibrationPhase({ experimentId }: CalibrationPhaseProps
if (showInfoPage) { if (showInfoPage) {
return ( return (
<CalibrationInfoView <CalibrationInfoView
onContinue={() => setShowInfoPage(false)} onContinue={() => {
scrollToTop();
setShowInfoPage(false);
}}
hasExistingAnswers={hasExistingAnswers} hasExistingAnswers={hasExistingAnswers}
/> />
); );
} }
// Show calibration page
return <CalibrationPageView entries={entries} experimentId={experimentId} />; return <CalibrationPageView entries={entries} experimentId={experimentId} />;
} }