front: fix projected train icon when ellipsis

OpenRailAssociation · Jan 15, 2025 · cb44087 · cb44087
1 parent ed45fd3
commit cb44087
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -368,13 +368,24 @@
             background-color: var(--info30);
             border-radius: 4px;
             position: relative;
+            flex-shrink: 0;
             svg {
               position: absolute;
               top: 0;
               left: 0;
               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 {