From cb44087ce1cc663c84b2f93d28165ff1ea361881 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

---
 .../components/Timetable/TimetableTrainCard.tsx    | 14 ++++++++------
 .../applications/operationalStudies/_scenario.scss | 11 +++++++++++
 2 files changed, 19 insertions(+), 6 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..28ba2b89c4f 100644
--- a/front/src/styles/scss/applications/operationalStudies/_scenario.scss
+++ b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -368,6 +368,7 @@
             background-color: var(--info30);
             border-radius: 4px;
             position: relative;
+            flex-shrink: 0;
             svg {
               position: absolute;
               top: 0;
@@ -375,6 +376,16 @@
               transform: translate(2px, 2px);
             }
           }
+          .train-info {
+            display: flex;
+            align-items: center;
+            min-width: 0;
+          }
+          .train-name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
         }
 
         .scenario-timetable-toolbar {