valknar/worldcup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use grid layout for full match card so teams stay in one row on mobile

Browse Source 
Replaced flex-wrap with grid-cols-[1fr_auto_1fr] so team columns fill
equally on either side of the score. Score font scales down on mobile,
padding tightens, team names truncate instead of wrapping.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-06-14 20:10:55 +02:00
parent ee1acb6e45
commit 886523173b
1 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/match-card.tsx
+20 -16
View File
@@ -74,33 +74,37 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
return ( return (
<Link href={`/tournaments/${match.year}#match-${match.id}`} className="block"> <Link href={`/tournaments/${match.year}#match-${match.id}`} className="block">
<div className="bg-gradient-to-br from-[#0d2016] to-[#102a1c] border border-[rgba(34,197,94,0.28)] rounded-2xl p-9 hover:border-[rgba(34,197,94,0.45)] transition-colors"> <div className="bg-gradient-to-br from-[#0d2016] to-[#102a1c] border border-[rgba(34,197,94,0.28)] rounded-2xl px-5 py-6 sm:px-9 sm:py-9 hover:border-[rgba(34,197,94,0.45)] transition-colors">
{match.isLive && <div className="mb-4"><LiveBadge label="Live Now" /></div>} {match.isLive && <div className="mb-4"><LiveBadge label="Live Now" /></div>}
<div className="flex items-center justify-center gap-8 flex-wrap"> <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 sm:gap-8">
<div className="text-center flex-1 min-w-[100px]"> <div className="text-center">
<TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="xl" className="mb-2.5" /> <TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="xl" className="mb-2" />
<div className="font-['Bebas_Neue'] text-xl tracking-[0.07em] text-[#dff5e8]">{match.team1.name}</div> <div className={`font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate ${winner === 'home' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
{match.team1.name}
</div>
</div> </div>
<div className="text-center flex-shrink-0"> <div className="text-center flex-shrink-0">
<div className="font-['Bebas_Neue'] text-[76px] text-[#22c55e] leading-none"> <div className="font-['Bebas_Neue'] text-[48px] sm:text-[76px] text-[#22c55e] leading-none">
{hasScore {hasScore
? match.scoreP ? match.scoreP
? `${match.scoreP[0]} – ${match.scoreP[1]}` ? `${match.scoreP[0]}–${match.scoreP[1]}`
: `${ft![0]} – ${ft![1]}` : `${ft![0]}–${ft![1]}`
: '? – ?'} : '?–?'}
</div> </div>
{match.scoreP && ( {match.scoreP && (
<div className="text-[11px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div> <div className="text-[10px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
)} )}
<div className="text-[10px] text-[#2a5c35] tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
<div className="text-xs text-[#1a3a22] mt-1">{match.date ? formatDate(match.date) : ''}</div>
{match.scoreEt && !match.scoreP && ( {match.scoreEt && !match.scoreP && (
<div className="text-[10px] text-[#2a5c35] mt-1">a.e.t. {match.scoreEt[0]}–{match.scoreEt[1]}</div> <div className="text-[10px] text-[#2a5c35] mt-0.5">a.e.t.</div>
)} )}
<div className="text-[9px] text-[#2a5c35] tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
<div className="text-[10px] text-[#1a3a22] mt-0.5">{match.date ? formatDate(match.date) : ''}</div>
</div> </div>
<div className="text-center flex-1 min-w-[100px]"> <div className="text-center">
<TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2.5" /> <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2" />
<div className="font-['Bebas_Neue'] text-xl tracking-[0.07em] text-[#dff5e8]">{match.team2.name}</div> <div className={`font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
{match.team2.name}
</div>
</div> </div>
</div> </div>
</div> </div>