fixup! front: add ellipsis in case of long rolling stock name in Mang…

…eTrainSchedule
OpenRailAssociation · Feb 21, 2025 · 74f4632 · 74f4632
1 parent b4f0df6
commit 74f4632
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/front/src/modules/rollingStock/components/RollingStockSelector/RollingStockSelector.tsx b/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>
               </>
             )}

diff --git a/front/src/modules/rollingStock/styles/_rollingStockSelector.scss b/front/src/modules/rollingStock/styles/_rollingStockSelector.scss
@@ -65,6 +65,7 @@
     justify-content: space-between;
     margin-top: 8px;
     gap: 8px;
+
     .rollingstock-info-comfort {
       display: flex;
       align-items: center;
@@ -78,15 +79,14 @@
     .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;

diff --git a/front/src/styles/scss/common/components/_tabs.scss b/front/src/styles/scss/common/components/_tabs.scss
@@ -14,7 +14,6 @@
         flex-grow: 1;
         // 4 pills to display in ManageTrainSchedule, with 3 gaps of 16px
         width: calc((100% - 3 * 16px) / 4);
-        text-overflow: ellipsis;
       }
     }
   }