front: fix various problems related to long rolling stock names

front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx

@@ -94,15 +94,15 @@ const ManageTrainSchedule = () => {
     id: 'rollingstock',
     title: rollingStock ? (
       <div className="managetrainschedule-tab">
-        <span className="rolling-stock">
+        <span className="rolling-stock-img">
           <RollingStock2Img rollingStock={rollingStock} />
         </span>
-        <span className="ml-2">{rollingStock.name}</span>
+        <span className="rolling-stock-name">{rollingStock.name}</span>
       </div>
     ) : (
       <div className="managetrainschedule-tab">
         <img src={rollingStockPic} alt="rolling stock" />
-        <span className="ml-2">{t('tabs.rollingStock')}</span>
+        <span className="rolling-stock-name">{t('tabs.rollingStock')}</span>
       </div>
     ),
     withWarning: rollingStockId === undefined,

front/src/applications/rollingStockEditor/views/RollingStockEditor.tsx

@@ -45,7 +45,7 @@ const RollingStockEditor = () => {
     <div className="rollingstock-editor-list pr-1" data-testid="rollingstock-editor-list">
       {filteredRollingStockList.map((data) => (
         <div key={data.id}>
-          <div className="d-flex">
+          <div className="rolling-stock-card-container">
             <div
               role="button"
               tabIndex={-1}
@@ -66,16 +66,14 @@ const RollingStockEditor = () => {
               />
             </div>
             {data.id === openedRollingStockCardId && selectedRollingStock && (
-              <div className="align-self-start">
-                <RollingStockEditorButtons
-                  setOpenedRollingStockCardId={setOpenedRollingStockCardId}
-                  isCondensed
-                  rollingStock={selectedRollingStock}
-                  setIsEditing={setIsEditing}
-                  resetFilters={resetFilters}
-                  isRollingStockLocked={selectedRollingStock.locked}
-                />
-              </div>
+              <RollingStockEditorButtons
+                setOpenedRollingStockCardId={setOpenedRollingStockCardId}
+                isCondensed
+                rollingStock={selectedRollingStock}
+                setIsEditing={setIsEditing}
+                resetFilters={resetFilters}
+                isRollingStockLocked={selectedRollingStock.locked}
+              />
             )}
           </div>
           {openedRollingStockCardId === data.id && (

front/src/modules/rollingStock/components/RollingStockEditor/RollingStockEditorButtons.tsx

@@ -104,8 +104,8 @@ const RollingStockEditorButtons = ({
 
   return (
     <div
-      className={cx('rollingstock-editor-buttons d-flex p-1', {
-        'condensed flex-column align-items-center rounded-right': isCondensed,
+      className={cx('rollingstock-editor-buttons', {
+        'condensed flex-column align-items-center': isCondensed,
       })}
     >
       <button

front/src/modules/rollingStock/components/RollingStockSelector/RollingStockSelector.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from 'react';
 
 import { useTranslation } from 'react-i18next';
+import { BiLockAlt } from 'react-icons/bi';
 
 import icon from 'assets/pictures/components/train.svg';
 import type { Comfort, RollingStockWithLiveries } from 'common/api/osrdEditoastApi';
@@ -91,11 +92,14 @@ const RollingStockSelector = ({
                       {t(`comfortTypes.${rollingStockComfort}`)}
                     </span>
                   </span>
-                  <RollingStockInfo
-                    rollingStock={rollingStockSelected}
-                    showMiddle={false}
-                    showSeries={false}
-                  />
+                  {rollingStockSelected.locked && (
+                    <span>
+                      <BiLockAlt />
+                    </span>
+                  )}
+                  <span className="rollingstock-info-end" data-testid="selected-rolling-stock-info">
+                    {rollingStockSelected.name}
+                  </span>
                 </div>
               </>
             )}

front/src/modules/rollingStock/styles/_rollingStockCard.scss

@@ -3,7 +3,7 @@
   position: relative;
   width: 100%;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: 8px;
   margin-bottom: 16px;
 
   &.solid {
@@ -113,9 +113,14 @@
         height: 24px;
         display: flex;
         align-items: center;
+        overflow: hidden;
+
         .rollingstock-info-series {
           height: 24px;
           font-weight: bold;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
         .rollingstock-info-unit {
           &.UM2 {
@@ -132,6 +137,9 @@
           margin-left: 4px;
           text-transform: uppercase;
           font-size: 0.7rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
       }
       .rollingstock-info-middle {
@@ -149,6 +157,9 @@
         align-items: center;
         color: #4d4d4d;
         font-size: 0.8rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }

front/src/modules/rollingStock/styles/_rollingStockSelector.scss

@@ -15,6 +15,9 @@
       .rollingstock-info-series {
         position: relative;
         font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       .rollingstock-info-unit {
         position: relative;
@@ -34,6 +37,9 @@
         text-transform: uppercase;
         vertical-align: text-bottom;
         font-size: 0.7rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }
@@ -59,6 +65,7 @@
     justify-content: space-between;
     margin-top: 8px;
     gap: 8px;
+
     .rollingstock-info-comfort {
       display: flex;
       align-items: center;
@@ -72,16 +79,18 @@
     .comfort-HEATING {
       display: flex;
     }
+
     .rollingstock-info-end {
-      display: flex;
-      align-items: center;
       height: 24px;
-      position: relative;
       border: 1px solid var(--coolgray3);
       color: var(--coolgray9);
       border-radius: 4px;
       padding: 0 8px;
+      line-height: 1.25rem;
       font-size: 0.8rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }

front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx

@@ -210,9 +210,7 @@ const TimetableTrainCard = ({
             </div>
             <div className="rolling-stock">
               {train.rollingStock && !train.invalidReason && (
-                <div className="rolling-stock-img">
-                  <RollingStock2Img rollingStock={train.rollingStock} />
-                </div>
+                <RollingStock2Img rollingStock={train.rollingStock} />
               )}
               {train.invalidReason && (
                 <div className="flex items-center">

front/src/styles/scss/applications/operationalStudies/_managetrainschedule.scss

@@ -3,19 +3,29 @@
     display: flex;
     align-items: center;
     width: 100%;
-    .rolling-stock {
+
+    .rolling-stock-img {
       width: 48px;
-      overflow: hidden;
       padding-bottom: 4px;
+      overflow: hidden;
+      mask-image: linear-gradient(90deg, black 90%, rgba(0, 0, 0, 0));
+      -webkit-mask-image: linear-gradient(90deg, black 90%, rgba(0, 0, 0, 0));
+
       img {
         height: 16px;
         object-fit: cover;
         object-position: left;
-        transform: scaleX(-1);
-        mask-image: linear-gradient(90deg, black 80%, rgba(0, 0, 0, 0));
-        -webkit-mask-image: linear-gradient(90deg, black 80%, rgba(0, 0, 0, 0));
       }
     }
+
+    .rolling-stock-name {
+      margin-left: 8px;
+      width: calc(100% - 48px - 8px); // 48px for the rs image width, 8px for the left margin
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     img {
       height: 24px;
     }

front/src/styles/scss/applications/operationalStudies/_scenario.scss

@@ -334,6 +334,17 @@
           margin-left: 8px;
           position: relative;
           line-height: 24px;
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: -24px;
+            width: 24px;
+            height: 22px;
+            background: linear-gradient(270deg, rgba(247, 246, 238, 0), rgba(247, 246, 238, 1));
+            z-index: 1;
+          }
         }
 
         .no-train {
@@ -497,12 +508,12 @@
               display: flex;
               flex-grow: 1;
               overflow: hidden;
-              justify-content: space-between;
 
               .rolling-stock {
                 display: flex;
                 align-items: center;
                 overflow: hidden;
+                height: 24px;
 
                 .status-invalid {
                   width: 4px;
@@ -513,33 +524,12 @@
                 }
 
                 /* Trick to hide the image if too narrow */
-                .rolling-stock-img {
-                  overflow: hidden;
-                  height: 24px;
-                  position: relative;
-
-                  &::before {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 24px;
-                    height: 22px;
-                    background: linear-gradient(
-                      270deg,
-                      rgba(247, 246, 238, 0),
-                      rgba(247, 246, 238, 1)
-                    );
-                    z-index: 1;
-                  }
-
-                  img {
-                    min-width: 40px;
-                    height: 16px;
-                    object-fit: cover;
-                    object-position: left;
-                    transform: scaleX(-1);
-                  }
+                img {
+                  min-width: 40px;
+                  height: 16px;
+                  object-fit: cover;
+                  object-position: left;
+                  transform: scaleX(-1);
                 }
               }
             }
@@ -652,7 +642,7 @@
           &.selected:not(.invalid) {
             background-color: var(--selection20);
             box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.25);
-            .rolling-stock-img::before {
+            .checkbox-title::after {
               background: linear-gradient(
                 270deg,
                 rgba(255, 242, 179, 0),

front/src/styles/scss/applications/rollingStockEditor/_rollingStockForm.scss

@@ -15,8 +15,40 @@
         .rollingstock-card-header,
         .rollingstock-footer {
           cursor: default;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
+        }
+      }
+    }
+
+    .rolling-stock-card-container {
+      position: relative;
+
+      .rollingstock-editor-buttons {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        padding: 4px;
+        justify-content: center;
+        background-color: var(--blue);
+        color: var(--white);
+        border-radius: 0 8px 8px 0;
+
+        svg {
+          margin: 0 30px;
+        }
+
+        &-group {
+          width: 6%;
+        }
+
+        &.condensed {
+          height: 100px;
+          justify-content: space-between;
+
+          svg {
+            justify-self: center;
+            margin: 0;
+          }
         }
       }
     }
@@ -148,32 +180,6 @@
     border-radius: 8px;
   }
 
-  &-buttons {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-    background-color: var(--blue);
-    color: var(--white);
-
-    svg {
-      margin: 0 30px;
-    }
-
-    &-group {
-      width: 6%;
-    }
-
-    &.condensed {
-      height: 100px;
-      justify-content: space-between;
-
-      svg {
-        justify-self: center;
-        margin: 0;
-      }
-    }
-  }
-
   &-left-container {
     width: 94%;
     padding-right: 24px;