From a4e99fee6495082a7ccd6cda87cea9021bf75a77 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 12:59:28 +0300
Subject: [PATCH] FlightCard: row grid
 [60px|120px|100px|1fr|85-145px|120px|1fr|10px] + padding 15px/20px (Angular
 parity)

---
 src/ui/flights/FlightCard.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/ui/flights/FlightCard.scss b/src/ui/flights/FlightCard.scss
index e95f2e41..58733f93 100644
--- a/src/ui/flights/FlightCard.scss
+++ b/src/ui/flights/FlightCard.scss
@@ -36,14 +36,19 @@
   //   [number] 80px [logo] 120px [dep-time] 100px
   //   [dep-station] minmax(45px, 145px) [status] minmax(85px, 145px)
   //   [arr-time] 120px [arr-station] minmax(45px, 145px) [arrow] 10px
+  // Mirrors Angular `flight-details-row-part-header :host` grid exactly:
+  //   [number] 60px [logo] 120px [dep-time] 100px
+  //   [dep-station] 1fr [status] minmax(85px, 145px)
+  //   [arr-time] 120px [arr-station] 1fr
+  // plus `padding: $space-l $space-xl` (15px / 20px) instead of the
+  // uniform 20px React was using — makes rows ~10px shorter per card.
   &__row {
     display: grid;
     grid-template-columns:
-      80px 120px 100px minmax(45px, 145px) minmax(85px, 145px)
-      120px minmax(45px, 145px) 10px;
+      60px 120px 100px 1fr minmax(85px, 145px) 120px 1fr 10px;
     align-items: center;
     gap: 0 vars.$space-l;
-    padding: vars.$space-xl;
+    padding: vars.$space-l vars.$space-xl;
     min-height: 68px;
   }