From 886523173b53a89b20434b50972ab4da8cef764c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 14 Jun 2026 20:10:55 +0200
Subject: [PATCH] fix: use grid layout for full match card so teams stay in one
 row on mobile

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>
---
 components/match-card.tsx | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/components/match-card.tsx b/components/match-card.tsx
index 8016c2f..6d13fe3 100644
--- a/components/match-card.tsx
+++ b/components/match-card.tsx
@@ -74,33 +74,37 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
 
   return (
     <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>}
-        <div className="flex items-center justify-center gap-8 flex-wrap">
-          <div className="text-center flex-1 min-w-[100px]">
-            <TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="xl" className="mb-2.5" />
-            <div className="font-['Bebas_Neue'] text-xl tracking-[0.07em] text-[#dff5e8]">{match.team1.name}</div>
+        <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 sm:gap-8">
+          <div className="text-center">
+            <TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="xl" className="mb-2" />
+            <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 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
                 ? match.scoreP
-                  ? `${match.scoreP[0]} – ${match.scoreP[1]}`
-                  : `${ft![0]} – ${ft![1]}`
-                : '? – ?'}
+                  ? `${match.scoreP[0]}–${match.scoreP[1]}`
+                  : `${ft![0]}–${ft![1]}`
+                : '?–?'}
             </div>
             {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 && (
-              <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 className="text-center flex-1 min-w-[100px]">
-            <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2.5" />
-            <div className="font-['Bebas_Neue'] text-xl tracking-[0.07em] text-[#dff5e8]">{match.team2.name}</div>
+          <div className="text-center">
+            <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2" />
+            <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>