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;
   }