From 2ae25e630a44f87ecb8d6c92fd2a0a65e3c792cd Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sun, 19 Apr 2026 10:04:26 +0300
Subject: [PATCH] Match Angular route-strip grid proportions + dotted hairlines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Measured track Angular uses for .flight-route:
  grid-template-columns: [depart-at] 97 [depart-to] 233
                         [status]   472 [arrive-at] 97
                         [arrive-to] 107
  padding: 50px 20px 0;

React was rendering a symmetric 5-column grid
(1fr for every non-time column), which cut the progress/status column
to ~25% of the strip instead of ~40%. Visually the effect was a
cramped 'Прибыл' label with barely any room for the green progress
bar. Retune to an asymmetric grid with `minmax(300px, 2.5fr)` on the
status column and lift the top padding to 40px.

Also switch the route→details and accordion-row hairlines from
#e0e6f0 / dashed to Angular's measured 1.3px dotted #D1DCEA for a
softer, identical visual.
---
 .../components/OnlineBoardDetailsPage.scss        | 15 ++++++++++++---
 .../details-panels/FlightDetailsAccordion.scss    |  3 ++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss
index 85291521..886509b2 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.scss
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss
@@ -8,11 +8,18 @@
 // ---------------------------------------------------------------------------
 
 .leg-route {
-  padding: vars.$space-xl;
+  // Angular gives the route strip a tall top padding so the status text
+  // ('Прибыл', 'Вылетел') has room above the progress bar, and a smaller
+  // bottom padding leading into the time-details block.
+  padding: 40px vars.$space-xl 0;
 
+  // Asymmetric grid (matches Angular's flight-route):
+  //   depart-time   depart-station   status/progress   arrive-time   arrive-station
+  // The center 'status' column takes ~40% of the row so the progress
+  // bar has visual weight; both time columns stay narrow.
   &__main {
     display: grid;
-    grid-template-columns: auto 1fr 1fr auto 1fr;
+    grid-template-columns: auto minmax(180px, 1fr) minmax(300px, 2.5fr) auto minmax(120px, 1fr);
     gap: 24px;
     align-items: center;
   }
@@ -170,7 +177,9 @@
     gap: 40px;
     margin-top: vars.$space-xl;
     padding-top: vars.$space-xl;
-    border-top: 1px dashed #e0e6f0;
+    // Angular uses a 1.3px dotted hairline (#D1DCEA) between the route
+    // strip and the time-details block.
+    border-top: 1.3px dotted #d1dcea;
   }
 
   &__details-side {
diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
index a58a4abc..96a77870 100644
--- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
+++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
@@ -56,8 +56,9 @@
   padding: 20px 0;
   position: relative;
 
+  // Angular draws the row separator as a 1.3px dotted hairline (#D1DCEA).
   & + .details-row {
-    border-top: 1.3px dotted #e0e6f0;
+    border-top: 1.3px dotted #d1dcea;
   }
 
   &__header {