diff --git a/app/components/KoFixtures.tsx b/app/components/KoFixtures.tsx index 0fdf9b8..da9bec6 100644 --- a/app/components/KoFixtures.tsx +++ b/app/components/KoFixtures.tsx @@ -84,20 +84,38 @@ export default function KoFixtures({ teams, matches }: { teams: Team[]; matches: }, [koMatches]); const targetRef = useRef(null); + const hasScrolledRef = useRef(null); useEffect(() => { - if (mounted && targetRef.current) { - targetRef.current.scrollIntoView({ behavior: "smooth", block: "center" }); - } - }, [mounted]); + if (!mounted || !targetRef.current) return; + if (targetMatchId === hasScrolledRef.current) return; + const el = targetRef.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; + return () => cancelAnimationFrame(raf); + }, [mounted, targetMatchId, koMatches.length]); + + const [showScrollTop, setShowScrollTop] = useState(false); + useEffect(() => { + const onScroll = () => setShowScrollTop(window.scrollY > 100); + window.addEventListener("scroll", onScroll, { passive: true }); + onScroll(); + return () => window.removeEventListener("scroll", onScroll); + }, []); if (koMatches.length === 0) { return
Keine K.o.-Spiele mit bekannten Teams verfügbar.
; } return ( -
- {groups.map(([date, groupMatches]) => ( + <> +
+ {groups.map(([date, groupMatches]) => (

{/* Kopfzeile */} @@ -133,7 +156,17 @@ export default function KoFixtures({ teams, matches }: { teams: Team[]; matches: marginBottom: 8, fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--ink-faint)", }}> - + + {isTarget && ( + + {live ? "LIVE" : "NÄCHSTES SPIEL"} + + )} {stageMap[m.stage] ?? m.stage} · Spiel {m.matchNumber || "—"} {city ? ` · ${city}` : ""} @@ -200,6 +233,23 @@ export default function KoFixtures({ teams, matches }: { teams: Team[]; matches:

))}
+ {showScrollTop && ( + + )} + ); }