diff --git a/app/[locale]/components/KoFixtures.tsx b/app/[locale]/components/KoFixtures.tsx index 94cb4ab..fabfd26 100644 --- a/app/[locale]/components/KoFixtures.tsx +++ b/app/[locale]/components/KoFixtures.tsx @@ -82,22 +82,31 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te return upcoming?.id ?? null; }, [koMatches]); - const targetRef = useRef(null); + // Scroll-Ziel: aktueller Tag (heute, oder nächster Spieltag bei Ruhetag) + const targetDateKey = useMemo(() => { + const todayKey = localDateKey(new Date().toISOString()); + const dayKeys = groups.map(([key]) => key); + if (dayKeys.includes(todayKey)) return todayKey; + const future = dayKeys.find(k => k >= todayKey); + return future ?? dayKeys[dayKeys.length - 1] ?? null; + }, [groups]); + + const targetDateRef = useRef(null); const hasScrolledRef = useRef(null); useEffect(() => { - if (!mounted || !targetRef.current) return; - if (targetMatchId === hasScrolledRef.current) return; - const el = targetRef.current; + if (!mounted || !targetDateRef.current) return; + if (targetDateKey === hasScrolledRef.current) return; + const el = targetDateRef.current; const raf = requestAnimationFrame(() => { const rect = el.getBoundingClientRect(); const absoluteTop = rect.top + window.scrollY; const offset = 180; window.scrollTo({ top: Math.max(0, absoluteTop - offset), behavior: "smooth" }); }); - hasScrolledRef.current = targetMatchId; + hasScrolledRef.current = targetDateKey; return () => cancelAnimationFrame(raf); - }, [mounted, targetMatchId, koMatches.length]); + }, [mounted, targetDateKey, koMatches.length]); const [showScrollTop, setShowScrollTop] = useState(false); useEffect(() => { @@ -116,7 +125,7 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te
{groups.map(([date, groupMatches]) => (
-

} setTab("groupfixtures"); }, []); + // Tab-Wechsel: nach ganz oben scrollen + useEffect(() => { + window.scrollTo({ top: 0, behavior: "auto" }); + }, [tab]); + const anyLive = data?.matches.some( (m) => m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED", );