From c7210625605b4f30fce3a1200f44ad4beb1c3a2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 16 Jun 2026 01:52:20 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20anchor=20scroll=20=E2=80=94=20double-rAF?=
 =?UTF-8?q?=20timing=20+=20scroll-mt-20=20on=20match=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useEffect fired before the browser had laid out the freshly-rendered
match cards, so getElementById returned null or scrollIntoView ran
before the element was in its final position. Double requestAnimationFrame
waits for React's commit AND the browser's layout pass.

scroll-mt-20 (80 px) adds clearance for the 60 px sticky nav so the
targeted card isn't hidden beneath it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/tournaments/[year]/client.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/tournaments/[year]/client.tsx b/app/tournaments/[year]/client.tsx
index 724e06b..2d45376 100644
--- a/app/tournaments/[year]/client.tsx
+++ b/app/tournaments/[year]/client.tsx
@@ -76,8 +76,11 @@ export function TournamentClient({ params }: { params: Promise<{ year: string }>
     if (!data) return
     const hash = window.location.hash
     if (!hash) return
-    const el = document.getElementById(hash.slice(1))
-    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    // double-rAF: first frame commits React's DOM, second frame lets the browser lay out
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const el = document.getElementById(hash.slice(1))
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }))
   }, [data])
 
 
@@ -162,7 +165,7 @@ export function TournamentClient({ params }: { params: Promise<{ year: string }>
               <h2 className="font-['Bebas_Neue'] text-2xl text-green-light mb-4">LIVE</h2>
               <div className="flex flex-col gap-4">
                 {liveMatches.map(m => (
-                  <div key={m.id} id={`match-${m.id}`}>
+                  <div key={m.id} id={`match-${m.id}`} className="scroll-mt-20">
                     <MatchCard match={m} />
                     <GoalList match={m} />
                   </div>
@@ -205,7 +208,7 @@ export function TournamentClient({ params }: { params: Promise<{ year: string }>
                     {/* Group matches */}
                     <div className="flex flex-col gap-2">
                       {groupMatches.map(m => (
-                        <div key={m.id} id={`match-${m.id}`}>
+                        <div key={m.id} id={`match-${m.id}`} className="scroll-mt-20">
                           <MatchCard match={m} compact />
                           <GoalList match={m} />
                         </div>
@@ -226,7 +229,7 @@ export function TournamentClient({ params }: { params: Promise<{ year: string }>
                   <h3 className="text-[13px] font-bold text-green tracking-wide uppercase mb-3">{round}</h3>
                   <div className="flex flex-col gap-3">
                     {roundMatches.map(m => (
-                      <div key={m.id} id={`match-${m.id}`}>
+                      <div key={m.id} id={`match-${m.id}`} className="scroll-mt-20">
                         <MatchCard match={m} compact />
                         <GoalList match={m} />
                       </div>