From cae8b78ffc85124ae43f325f9d3affde6e4ad581 Mon Sep 17 00:00:00 2001
From: romainvalls <romain.valls95@gmail.com>
Date: Wed, 15 Jan 2025 15:41:56 +0100
Subject: [PATCH] front: fix projected train icon when ellipsis

Signed-off-by: romainvalls <romain.valls95@gmail.com>
---
 .../Timetable/TimetableTrainCard.tsx          | 14 ++++---
 .../operationalStudies/_scenario.scss         | 41 +++++++++++--------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx b/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx
index 02341a5a559..e15723ebba3 100644
--- a/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx
+++ b/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx
@@ -178,12 +178,14 @@ const TimetableTrainCard = ({
                 />
               </div>
               <div title={train.trainName} className="checkbox-label">
-                {projectionPathIsUsed && (
-                  <div className="train-projected">
-                    <Manchette iconColor="var(--white100)" />
-                  </div>
-                )}
-                {train.trainName}
+                <div className="train-info">
+                  {projectionPathIsUsed && (
+                    <div className="train-projected">
+                      <Manchette iconColor="var(--white100)" />
+                    </div>
+                  )}
+                  <span className="train-name">{train.trainName}</span>
+                </div>
               </div>
             </div>
             <div className="rolling-stock">
diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
index 6bb98a2bce9..d9ab8651761 100644
--- a/front/src/styles/scss/applications/operationalStudies/_scenario.scss
+++ b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -356,23 +356,30 @@
           font-size: 1rem;
           font-weight: 600;
           max-width: 160px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: flex;
-          align-items: center;
-          .train-projected {
-            height: 20px;
-            width: 20px;
-            margin-right: 6px;
-            background-color: var(--info30);
-            border-radius: 4px;
-            position: relative;
-            svg {
-              position: absolute;
-              top: 0;
-              left: 0;
-              transform: translate(2px, 2px);
+
+          .train-info {
+            display: flex;
+            align-items: center;
+            min-width: 0;
+            .train-projected {
+              height: 20px;
+              width: 20px;
+              margin-right: 6px;
+              background-color: var(--info30);
+              border-radius: 4px;
+              position: relative;
+              flex-shrink: 0;
+              svg {
+                position: absolute;
+                top: 0;
+                left: 0;
+                transform: translate(2px, 2px);
+              }
+            }
+            .train-name {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
             }
           }
         }