front: fix scenario name overlaps

Author: Akctarus

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

@@ -225,7 +225,12 @@ export default function Scenario() {
                 {scenario && (
                   <div className="scenario-details">
                     <div className="scenario-details-name">
-                      <span className="flex-grow-1 scenario-name">{scenario.name}</span>
+                      <span
+                        className="flex-grow-1 scenario-name text-truncate"
+                        title={scenario.name}
+                      >
+                        {scenario.name}
+                      </span>
                       <button
                         data-testid="editScenario"
                         className="scenario-details-modify-button"

front/src/modules/scenario/components/ScenarioExplorer/MiniCards.tsx

@@ -91,7 +91,9 @@ export const ScenarioMiniCard = ({
       tabIndex={0}
       onClick={selectScenario}
     >
-      <div>{scenario.name}</div>
+      <div className="text-truncate" title={scenario.name}>
+        {scenario.name}
+      </div>
     </div>
   );
 };

front/src/modules/scenario/components/ScenarioExplorer/ScenarioExplorer.tsx

@@ -131,7 +131,9 @@ const ScenarioExplorer = ({
               <img src={scenarioIcon} alt="scenario icon" />
               <span className="scenario-explorator-card-head-legend">{t('scenarioLegend')}</span>
               <div className="scenario-explorator-card-head-scenario">
-                {scenarioDetails.name}
+                <span className="text-truncate" title={scenarioDetails.name}>
+                  {scenarioDetails.name}
+                </span>
                 {timetable && (
                   <span className="scenario-explorator-card-head-scenario-traincount">
                     {validTrainCount(timetable.train_schedule_summaries)}

front/src/modules/scenario/styles/_scenarioExplorer.scss

@@ -83,6 +83,7 @@
           justify-content: space-between;
           font-size: 1rem;
           background-color: var(--secondary);
+          overflow: hidden;
           .scenario-explorator-card-head-scenario-traincount {
             display: flex;
             align-items: center;