From f1b5328b78bff20fa7e468ca222e3ba715dc7bfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 14 Jun 2026 20:26:49 +0200
Subject: [PATCH] fix: switch team table and confederation stats to proper
 table layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Team table: overflow-x-auto wrapper + min-w-[560px] so flags and names
never collapse; columns are right-aligned numeric data, left-aligned team.
Confederation: replace CSS grid with <table> — browser handles column
alignment automatically, no more misalignment between header and rows.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/stats/page.tsx | 98 ++++++++++++++++++++++++++--------------------
 1 file changed, 55 insertions(+), 43 deletions(-)

diff --git a/app/stats/page.tsx b/app/stats/page.tsx
index e24472f..848c122 100644
--- a/app/stats/page.tsx
+++ b/app/stats/page.tsx
@@ -290,19 +290,26 @@ export default function StatsPage() {
         <div className="mb-12">
           <SectionTitle>🌍 Performance by Confederation</SectionTitle>
           <Card>
-            <div className="grid px-4 py-2 text-[9px] text-[#2a5c35] tracking-[0.1em] uppercase"
-              style={{ gridTemplateColumns: '1fr 80px 60px 80px', gap: '8px' }}>
-              <span>Confederation</span><span className="text-center">Appearances</span><span className="text-center">Titles</span><span className="text-center">Goals</span>
-            </div>
-            {confStats.map(c => (
-              <div key={c.confederation} className="grid px-4 py-3 border-t items-center"
-                style={{ gridTemplateColumns: '1fr 80px 60px 80px', gap: '8px', borderColor: 'rgba(34,197,94,0.06)' }}>
-                <span className="text-sm font-medium text-[#dff5e8]">{c.confederation}</span>
-                <span className="text-center text-sm text-[#6abf7a]">{c.appearances}</span>
-                <span className="text-center font-['Bebas_Neue'] text-xl text-[#22c55e]">{c.titles}</span>
-                <span className="text-center text-sm text-[#6abf7a]">{c.totalGoals}</span>
-              </div>
-            ))}
+            <table className="w-full">
+              <thead>
+                <tr className="border-b" style={{ borderColor: 'rgba(34,197,94,0.08)' }}>
+                  <th className="text-left px-4 py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-[#2a5c35]">Confederation</th>
+                  <th className="text-right px-4 py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-[#2a5c35]">Appearances</th>
+                  <th className="text-right px-4 py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-[#2a5c35]">Titles</th>
+                  <th className="text-right px-4 py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-[#2a5c35]">Goals</th>
+                </tr>
+              </thead>
+              <tbody>
+                {confStats.map(c => (
+                  <tr key={c.confederation} className="border-t" style={{ borderColor: 'rgba(34,197,94,0.06)' }}>
+                    <td className="px-4 py-3 text-sm font-medium text-[#dff5e8]">{c.confederation}</td>
+                    <td className="px-4 py-3 text-right text-sm text-[#6abf7a]">{c.appearances}</td>
+                    <td className="px-4 py-3 text-right font-['Bebas_Neue'] text-xl text-[#22c55e]">{c.titles}</td>
+                    <td className="px-4 py-3 text-right text-sm text-[#6abf7a]">{c.totalGoals}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </Card>
         </div>
       )}
@@ -312,37 +319,42 @@ export default function StatsPage() {
         <div>
           <SectionTitle>📊 All-Time Team Table</SectionTitle>
           <Card>
-            <div className="grid px-4 py-2 text-[9px] text-[#2a5c35] tracking-[0.1em] uppercase"
-              style={{ gridTemplateColumns: '28px 1fr 50px 44px 44px 44px 60px 60px 60px 52px', gap: '4px' }}>
-              <span>#</span><span>Team</span><span className="text-center">WC</span>
-              <span className="text-center">W</span><span className="text-center">D</span><span className="text-center">L</span>
-              <span className="text-center">GF</span><span className="text-center">GA</span><span className="text-center">GD</span>
-              <span className="text-center">Win%</span>
+            <div className="overflow-x-auto">
+              <table className="w-full" style={{ minWidth: '560px' }}>
+                <thead>
+                  <tr className="border-b" style={{ borderColor: 'rgba(34,197,94,0.08)' }}>
+                    {['#', 'Team', 'WC', 'W', 'D', 'L', 'GF', 'GA', 'GD', 'Win%'].map((h, i) => (
+                      <th key={h} className={`py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-[#2a5c35] ${i === 0 ? 'pl-4 pr-2 text-left w-8' : i === 1 ? 'px-2 text-left' : 'px-2 text-right'}`}>{h}</th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {teams.slice(0, 40).map((t, i) => (
+                    <tr key={t.id} className="border-t hover:bg-[rgba(34,197,94,0.03)]" style={{ borderColor: 'rgba(34,197,94,0.05)' }}>
+                      <td className="pl-4 pr-2 py-2.5 text-[11px] text-[#2a5c35] font-bold">{i + 1}</td>
+                      <td className="px-2 py-2.5">
+                        <Link href={`/teams/${t.slug}`} className="flex items-center gap-2">
+                          <TeamFlag name={t.name} iso2={t.iso2} size="sm" />
+                          <span className="text-sm text-[#dff5e8] whitespace-nowrap">{t.name}</span>
+                        </Link>
+                      </td>
+                      <td className="px-2 py-2.5 text-right text-sm text-[#4a7a55]">{t.stats?.appearances}</td>
+                      <td className="px-2 py-2.5 text-right text-sm text-[#4a7a55]">{t.stats?.wins}</td>
+                      <td className="px-2 py-2.5 text-right text-sm text-[#4a7a55]">{t.stats?.draws}</td>
+                      <td className="px-2 py-2.5 text-right text-sm text-[#4a7a55]">{t.stats?.losses}</td>
+                      <td className="px-2 py-2.5 text-right text-sm text-[#4a7a55]">{t.stats?.goalsFor}</td>
+                      <td className="px-2 py-2.5 text-right text-sm text-[#4a7a55]">{t.stats?.goalsAgainst}</td>
+                      <td className="px-2 py-2.5 text-right text-sm text-[#4a7a55]">
+                        {(t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0) >= 0
+                          ? `+${(t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0)}`
+                          : (t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0)}
+                      </td>
+                      <td className="px-2 pr-4 py-2.5 text-right text-[13px] font-bold text-[#22c55e]">{t.stats?.winPct}%</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
             </div>
-            {teams.slice(0, 40).map((t, i) => (
-              <Link key={t.id} href={`/teams/${t.slug}`}>
-                <div className="grid px-4 py-2.5 border-t items-center hover:bg-[rgba(34,197,94,0.03)] cursor-pointer"
-                  style={{ gridTemplateColumns: '28px 1fr 50px 44px 44px 44px 60px 60px 60px 52px', gap: '4px', borderColor: 'rgba(34,197,94,0.05)' }}>
-                  <span className="text-[11px] text-[#2a5c35] font-bold">{i + 1}</span>
-                  <div className="flex items-center gap-2 overflow-hidden">
-                    <TeamFlag name={t.name} iso2={t.iso2} size="sm" />
-                    <span className="text-sm text-[#dff5e8] truncate">{t.name}</span>
-                  </div>
-                  <span className="text-center text-sm text-[#4a7a55]">{t.stats?.appearances}</span>
-                  <span className="text-center text-sm text-[#4a7a55]">{t.stats?.wins}</span>
-                  <span className="text-center text-sm text-[#4a7a55]">{t.stats?.draws}</span>
-                  <span className="text-center text-sm text-[#4a7a55]">{t.stats?.losses}</span>
-                  <span className="text-center text-sm text-[#4a7a55]">{t.stats?.goalsFor}</span>
-                  <span className="text-center text-sm text-[#4a7a55]">{t.stats?.goalsAgainst}</span>
-                  <span className="text-center text-sm text-[#4a7a55]">
-                    {(t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0) >= 0
-                      ? `+${(t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0)}`
-                      : (t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0)}
-                  </span>
-                  <span className="text-center text-[13px] font-bold text-[#22c55e]">{t.stats?.winPct}%</span>
-                </div>
-              </Link>
-            ))}
           </Card>
         </div>
       )}