From 07f6a8ae13703067f11c3c7755a6717cc703b741 Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sun, 12 Apr 2026 14:53:34 +0200
Subject: [PATCH] =?UTF-8?q?style:=20card=20polish=20=E2=80=94=20badge=20sp?=
 =?UTF-8?q?acing,=20no=20separator=20line,=20wider=20tip=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Badges: more margin below (10px), better text centering (line-height:1)
- Removed border-top separator between flags and tip area
- Tipped row: full width to align with flag edges
- Reduced card padding for compactness

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/MatchCard.module.css | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index 2295a5c..86141cd 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -1,7 +1,7 @@
 /* MatchCard — Stadium Elite Style */
 
 .card {
-  padding: 20px 24px;
+  padding: 16px 20px;
   transition: box-shadow 0.2s, transform 0.15s;
   cursor: default;
 }
@@ -26,7 +26,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 6px;
+  margin-bottom: 10px;
 }
 
 .badgeSlot {
@@ -91,10 +91,13 @@
 .countdownBadge {
   font-size: 11px;
   font-weight: 700;
-  padding: 3px 9px;
+  padding: 4px 10px;
   border-radius: 20px;
   background: var(--surface-high);
   color: var(--text-secondary);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
 }
 
 .countdownUrgent {
@@ -109,9 +112,12 @@
   font-weight: 600;
   color: var(--primary);
   background: var(--primary-dim);
-  padding: 3px 9px;
+  padding: 4px 10px;
   border-radius: 20px;
   border: 1px solid rgba(75,183,248,0.15);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
 }
 
 /* LED time between flags */
@@ -234,8 +240,7 @@
 
 /* Tipp area */
 .tipRow {
-  border-top: 1px solid var(--border-subtle);
-  padding-top: 14px;
+  padding-top: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -413,6 +418,7 @@
   padding: 10px 14px;
   cursor: pointer;
   transition: background 0.2s;
+  width: 100%;
 }
 .tippedRow:hover {
   background: rgba(52, 211, 153, 0.14);