front: Change display when description is too long

Signed-off-by: theocrsb <[email protected]>

Author: theocrsb

front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx

@@ -1,4 +1,6 @@
-import { Blocked, ChevronLeft, Pencil } from '@osrd-project/ui-icons';
+import { useEffect, useRef, useState } from 'react';
+
+import { Blocked, ChevronLeft, Pencil, X } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
 
 import type { InfraWithState, ScenarioResponse } from 'common/api/osrdEditoastApi';
@@ -22,6 +24,29 @@ const ScenarioDescription = ({
 }: ScenarioDescriptionProps) => {
   const { t } = useTranslation('operationalStudies/scenario');
   const { openModal } = useModal();
+  const [isOpenedDescription, setIsOpenedDescription] = useState<boolean>(false);
+  const [width, setWidth] = useState<number>(0);
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  const showDescription = () => {
+    setIsOpenedDescription(!isOpenedDescription);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (ref.current) {
+        setWidth(ref.current.offsetWidth);
+      }
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   return (
     <div>
@@ -31,9 +56,23 @@ const ScenarioDescription = ({
         </span>
       </div>
 
-      <div className="scenario-description">
+      <div ref={ref} className="scenario-description">
         {scenario.description && (
-          <div className="scenario-details-description">{scenario.description}</div>
+          <div
+            title={isOpenedDescription ? '' : scenario.description}
+            className={`scenario-details-description ${isOpenedDescription ? 'opened' : 'not-opened'}`}
+            style={{ width: isOpenedDescription ? width + 120 : width }}
+          >
+            {scenario.description}
+            <span
+              onClick={showDescription}
+              role="button"
+              tabIndex={0}
+              className={isOpenedDescription ? 'displayed-description' : 'display-description'}
+            >
+              {isOpenedDescription ? <X /> : '(plus)'}
+            </span>
+          </div>
         )}
         <div className="flex justify-end">
           <button

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

@@ -119,7 +119,7 @@
     min-width: 24.5rem;
     max-width: 29.5rem;
     padding: 0.875rem 1.5rem 0 1.5rem;
-    box-shadow: inset -1px 0 var(--black5);
+    box-shadow: inset -0.0625rem 0 var(--black5);
 
     .scenario-sidemenu :first-child:hover {
       .update-scenario {
@@ -141,7 +141,6 @@
 
     .scenario-description {
       position: relative;
-      text-wrap: wrap;
 
       .scenario-details-description {
         color: var(--grey50);
@@ -152,6 +151,44 @@
         word-break: break-all;
       }
 
+      .not-opened {
+        position: relative;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        .display-description {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          background: rgba(222, 221, 214, 1);
+          color: var(--grey80);
+          padding-inline: 0.2188rem;
+        }
+      }
+
+      .opened {
+        position: absolute;
+        background-color: var(--white100);
+        color: var(--grey80);
+        padding: 3.375rem 3.5rem 3.125rem 3.5rem;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5rem;
+        z-index: 3;
+        border-radius: 0.375rem;
+        box-shadow:
+          0rem 0.375rem 1.3125rem -0.3125rem rgba(255, 171, 88, 0.31),
+          0rem 1rem 1.875rem -0.3125rem rgba(0, 0, 0, 0.19),
+          0rem 0.1875rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.16);
+        transform: translateX(-0.5rem);
+        .displayed-description {
+          position: absolute;
+          top: 1rem - 0.3125rem;
+          right: 1rem;
+        }
+      }
+
       .scenario-collapse-button {
         position: absolute;
         padding-bottom: 0.188rem;
@@ -163,8 +200,8 @@
         border-radius: 0.313rem 0 0 0.313rem;
         top: 0;
         transform: translateX(1.5rem);
-        box-shadow: 0 0px 0 1px var(--black10);
-        clip-path: inset(-1px 0 -1px -1px);
+        box-shadow: 0 0 0 0.0625rem var(--black10);
+        clip-path: inset(-0.0625rem 0 -0.0625rem -0.0625rem);
       }
 
       .update-scenario {
@@ -391,7 +428,7 @@
         .invalid-trains {
           display: flex;
           background: var(--warning5);
-          box-shadow: inset 0px 1px var(--white100);
+          box-shadow: inset 0 0.0625rem var(--white100);
           height: 3rem;
           font-size: 1rem;
           font-weight: 600;