diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css index 7e19a73..25761fa 100644 --- a/frontend/src/components/MatchCard.module.css +++ b/frontend/src/components/MatchCard.module.css @@ -77,17 +77,16 @@ border: 1px solid rgba(75,183,248,0.15); } -/* Kickoff row — above teams */ -.kickoffRow { - text-align: center; - margin-bottom: 8px; +/* Kickoff badge in header row */ +.kickoffBadge { + font-size: 12px; + font-weight: 700; + color: var(--text-secondary); + letter-spacing: 0.02em; } -.kickoffTime { - font-size: 12px; - font-weight: 600; - color: var(--text-secondary); - letter-spacing: 0.03em; +.topRowSpacer { + flex: 1; } /* VS separator */ diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx index 5fa0e8b..2652dae 100644 --- a/frontend/src/components/MatchCard.tsx +++ b/frontend/src/components/MatchCard.tsx @@ -94,7 +94,7 @@ export default function MatchCard({ match, onTip }: Props) { return (
- {/* Top row: Status (only Live/Finished) + Group + Countdown */} + {/* Top row: Group + Kickoff + Countdown */}
{(isLive || isFinished) && ( @@ -107,6 +107,10 @@ export default function MatchCard({ match, onTip }: Props) { {match.group.replace('GROUP_', 'Gruppe ')} )} + {!isFinished && !isLive && ( + {formatKickoff(match.utcDate)} + )} + {(state === 'open' || state === 'tipped') && match.tippable && ( match.minutesUntilKickoff < 60 ? ( @@ -118,13 +122,6 @@ export default function MatchCard({ match, onTip }: Props) { )}
- {/* Kickoff time — above the teams row */} - {!isFinished && !isLive && ( -
- {formatKickoff(match.utcDate)} -
- )} - {/* Teams + Score */}
{/* Home */} diff --git a/frontend/src/pages/MatchesPage.module.css b/frontend/src/pages/MatchesPage.module.css index 5de745a..1f24ac7 100644 --- a/frontend/src/pages/MatchesPage.module.css +++ b/frontend/src/pages/MatchesPage.module.css @@ -89,7 +89,7 @@ display: flex; align-items: center; gap: 12px; - padding: 4px 0; + padding: 12px 0 6px; } .dateLine {