front: fix projected train icon when ellipsis

Signed-off-by: romainvalls <[email protected]>
OpenRailAssociation · Jan 22, 2025 · cae8b78 · cae8b78
1 parent ed45fd3
commit cae8b78
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 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
@@ -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;
             }
           }
         }