From 3838ab691c6126d7e1694f6d074e87ef0fbcd6ba Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sat, 18 Apr 2026 18:35:27 +0300
Subject: [PATCH] =?UTF-8?q?Right-align=20'=D0=9F=D1=80=D0=B8=D0=B1=D1=8B?=
 =?UTF-8?q?=D0=BB'=20+=20place=20plane=20marker=20at=20end=20for=20finishe?=
 =?UTF-8?q?d=20legs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Angular anchors the status label ('Прибыл') above the right end of the
progress bar and parks the green plane icon at 100%. React was keeping
both centered even after the flight landed; move the plane marker to
the bar's end (100%) for finished as well as in-flight, and make the
status text flex-end so it lines up with the arrival column.
---
 .../components/OnlineBoardDetailsPage.scss             |  7 ++++++-
 .../online-board/components/OnlineBoardDetailsPage.tsx | 10 ++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss
index b17763b3..c37eec04 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.scss
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss
@@ -88,8 +88,13 @@
   }
 
   &__center--finished {
-    .leg-route__status-text { color: #6da244; }
+    .leg-route__status-text {
+      color: #6da244;
+      text-align: right;
+      align-self: flex-end;
+    }
     .leg-route__bar-inner { background: #6da244; }
+    .leg-route__plane-marker { color: #6da244; }
   }
 
   &__center--in-flight {
diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
index d626b5fc..9729a32c 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.tsx
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
@@ -174,18 +174,16 @@ function LegRoute({
                   ? "100%"
                   : isInFlight
                     ? `${flightPercent}%`
-                    : isCancelled
-                      ? "0%"
-                      : "0%",
+                    : "0%",
               }}
             />
-            {isInFlight && (
+            {(isInFlight || isFinished) && (
               <span
                 className="leg-route__plane-marker"
-                style={{ left: `${flightPercent}%` }}
+                style={{ left: isFinished ? "100%" : `${flightPercent}%` }}
                 aria-hidden="true"
               >
-                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
                   <path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 1 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5L21 16z" />
                 </svg>
               </span>