FlightCard: row grid [60px|120px|100px|1fr|85-145px|120px|1fr|10px] + padding 15px/20px (Angular parity)

This commit is contained in:
2026-04-20 12:59:28 +03:00
parent b306127cfc
commit a4e99fee64
+8 -3
View File
@@ -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;
}