Flush DayTabs against flight list + mask viewport top on scroll

Drop the 8px margin below the day-tabs strip so the sticky card touches
the results frame, matching Angular's layout.

Add page-layout__scroll-overlay — a fixed 25px dark-blue strip across
the top of the viewport — so flight rows scrolling past the 20px-sticky
date row don't peek through the gap above it.

Realign DayTabs range to match Angular's boardSearchFrom=1 /
boardSearchTo=7 defaults (today-1 through today+7). Previous 2/14
window left today off-center in the 7-tab page.
This commit is contained in:
2026-04-19 14:50:40 +03:00
parent f2661768b0
commit f9dec146f8
4 changed files with 25 additions and 3 deletions
@@ -3,7 +3,9 @@
// text; siblings have light-blue bg + brand link-blue label.
.day-tabs-wrap {
margin-bottom: 8px;
// Angular keeps day-tabs flush against the flight list; the sticky
// card and the results frame touch.
margin-bottom: 0;
}
.day-tabs {
@@ -401,8 +401,8 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
<DayTabs
selectedDate={params.date}
availableDates={calendarDays}
daysBefore={2}
daysAfter={14}
daysBefore={1}
daysAfter={7}
locale={lang}
onNavigate={handleDateChange}
/>
+19
View File
@@ -136,4 +136,23 @@
top: 20px;
}
}
// Angular paints a fixed strip across the top 25px of the viewport so
// flight rows scrolling past the sticky date strip don't peek through
// the 20px gap. Matches the .page-layout__scroll-overlay rule.
&__scroll-overlay {
@include screen.gt-mobile {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: calc(100% - 20px);
height: 25px;
background-color: #022040;
background-image: url("/assets/img/background.jpg");
background-repeat: no-repeat;
background-size: 100vw;
pointer-events: none;
}
}
}
+1
View File
@@ -37,6 +37,7 @@ export const PageLayout: FC<PageLayoutProps> = ({
}) => {
return (
<div className="page-layout">
{stickyContent && <div className="page-layout__scroll-overlay" aria-hidden="true" />}
<div className="page-layout__row page-layout__header">
<aside className="page-layout__column-left page-layout__header-left">
{headerLeft}