From f9dec146f8810c3b7fb08562c1ab64ef5e7bc0d5 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sun, 19 Apr 2026 14:50:40 +0300
Subject: [PATCH] Flush DayTabs against flight list + mask viewport top on
 scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../components/DayTabs/DayTabs.scss           |  4 +++-
 .../components/OnlineBoardSearchPage.tsx      |  4 ++--
 src/ui/layout/PageLayout.scss                 | 19 +++++++++++++++++++
 src/ui/layout/PageLayout.tsx                  |  1 +
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/features/online-board/components/DayTabs/DayTabs.scss b/src/features/online-board/components/DayTabs/DayTabs.scss
index 292cfdaf..5ca8b122 100644
--- a/src/features/online-board/components/DayTabs/DayTabs.scss
+++ b/src/features/online-board/components/DayTabs/DayTabs.scss
@@ -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 {
diff --git a/src/features/online-board/components/OnlineBoardSearchPage.tsx b/src/features/online-board/components/OnlineBoardSearchPage.tsx
index 8ccb5f38..73bc15e3 100644
--- a/src/features/online-board/components/OnlineBoardSearchPage.tsx
+++ b/src/features/online-board/components/OnlineBoardSearchPage.tsx
@@ -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}
           />
diff --git a/src/ui/layout/PageLayout.scss b/src/ui/layout/PageLayout.scss
index d674456d..79cd2f22 100644
--- a/src/ui/layout/PageLayout.scss
+++ b/src/ui/layout/PageLayout.scss
@@ -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;
+    }
+  }
 }
diff --git a/src/ui/layout/PageLayout.tsx b/src/ui/layout/PageLayout.tsx
index 8365282e..3822db79 100644
--- a/src/ui/layout/PageLayout.tsx
+++ b/src/ui/layout/PageLayout.tsx
@@ -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}