diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css index 2fd42ba..d8f98e0 100644 --- a/frontend/src/components/MatchCard.module.css +++ b/frontend/src/components/MatchCard.module.css @@ -99,37 +99,30 @@ /* Match row — Teams + Score */ .matchRow { - display: grid; - grid-template-columns: 1fr 40px 1fr; + display: flex; align-items: center; - gap: 8px; + justify-content: center; + gap: 16px; margin-bottom: 18px; } -/* Teams */ -.teamHome { +/* Teams — flag on top, name below */ +.teamHome, .teamAway { display: flex; + flex-direction: column; align-items: center; - gap: 12px; - justify-content: flex-end; + gap: 6px; + flex: 1; + min-width: 0; } -.teamAway { - display: flex; - align-items: center; - gap: 12px; -} - -/* Flag box — glossy square */ +/* Flag box — subtle, clean */ .flagBox { - width: 56px; - height: 56px; - border-radius: 13px; + width: 52px; + height: 52px; + border-radius: 12px; background: var(--surface-high); - box-shadow: - var(--shadow-card), - inset 0 1px 0 rgba(255,255,255,0.55), - inset 0 -1px 0 rgba(0,0,0,0.06); + box-shadow: 0 2px 8px rgba(0,0,0,0.12); border: 1px solid var(--border-subtle); display: flex; align-items: center; @@ -143,15 +136,15 @@ content: ''; position: absolute; top: 0; left: 0; right: 0; - height: 55%; - background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%); + height: 40%; + background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%); pointer-events: none; z-index: 1; } .crest { - width: 38px; - height: 38px; + width: 36px; + height: 36px; object-fit: contain; position: relative; z-index: 0; @@ -159,10 +152,15 @@ .teamName { font-family: 'Plus Jakarta Sans', sans-serif; - font-weight: 700; - font-size: 15px; + font-weight: 600; + font-size: 13px; color: var(--text-primary); line-height: 1.2; + text-align: center; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } /* Score / VS center */ diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx index 31133ac..5fa0e8b 100644 --- a/frontend/src/components/MatchCard.tsx +++ b/frontend/src/components/MatchCard.tsx @@ -94,18 +94,19 @@ export default function MatchCard({ match, onTip }: Props) { return (