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