diff --git a/src/features/online-board/components/OnlineBoardSearchPage.scss b/src/features/online-board/components/OnlineBoardSearchPage.scss index 3bc16c64..f879ab83 100644 --- a/src/features/online-board/components/OnlineBoardSearchPage.scss +++ b/src/features/online-board/components/OnlineBoardSearchPage.scss @@ -3,6 +3,14 @@ @use "../../../styles/screen" as screen; .online-board-search { + // Results frame sits directly under the sticky DayTabs card, so + // Angular rounds only the bottom corners and clears 3px at the top + // for the tab underline. Mirror the board-search-result rule. + section.frame { + border-radius: 0 0 vars.$border-radius vars.$border-radius; + padding-top: 3px; + } + &__status { padding: vars.$space-m vars.$space-xl; } diff --git a/src/ui/flights/FlightCard.scss b/src/ui/flights/FlightCard.scss index 21337054..9455ef98 100644 --- a/src/ui/flights/FlightCard.scss +++ b/src/ui/flights/FlightCard.scss @@ -31,21 +31,27 @@ } } + // Matches Angular's board-flight-header grid (8 named tracks, no row + // gap, 15px column gap): + // [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 &__row { display: grid; - grid-template-columns: 70px 100px 80px 1fr 90px 80px 1fr auto; + grid-template-columns: + 80px 120px 100px minmax(45px, 145px) minmax(85px, 145px) + 120px minmax(45px, 145px) 10px; align-items: center; - gap: 12px; - padding: 18px vars.$space-xl; + gap: 0 vars.$space-l; + padding: vars.$space-xl; min-height: 68px; } // Schedule mode swaps the central status column for a wider duration - // pill — Angular's grid is 80 / 120 / 100 / minmax(45,240) / 100 / - // 100 / minmax(45,240) / 10. + // pill — Angular's grid widens the station/duration tracks to fit. &--schedule .flight-card__row { grid-template-columns: 80px 120px 100px minmax(80px, 1fr) 100px 100px minmax(80px, 1fr) 16px; - gap: vars.$space-l; + gap: 0 vars.$space-l; } &__number { @@ -282,6 +288,18 @@ } } + // Tablet breakpoint narrows the grid to fit the sidebar + results + // column at 768–1050px widths. Mirrors Angular's tablets() override + // in board-flight-header.component.tablets.scss. + @include screen.tablets { + &__row { + grid-template-columns: + 70px 90px 90px 1fr 85px 90px 1fr 10px; + gap: 0 vars.$space-m; + padding: vars.$space-l; + } + } + @include screen.mobile { &__row { grid-template-columns: 1fr auto 1fr;