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,9 +1,12 @@
-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';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import AddAndEditScenarioModal from 'modules/scenario/components/AddOrEditScenarioModal';
+import useOutsideClick from 'utils/hooks/useOutsideClick';
 
 import InfraLoadingState from './InfraLoadingState';
 
@@ -22,6 +25,34 @@ const ScenarioDescription = ({
 }: ScenarioDescriptionProps) => {
   const { t } = useTranslation('operationalStudies/scenario');
   const { openModal } = useModal();
+  const [isOpenedDescription, setIsOpenedDescription] = useState<boolean>(false);
+  const expandedDescriptionRef = useRef<HTMLDivElement | null>(null);
+  const collapsedDescriptionRef = useRef<HTMLDivElement | null>(null);
+  const [isTooLongDescription, setIsTooLongDescription] = useState<boolean>(false);
+
+  const toggleDescription = () => {
+    setIsOpenedDescription(!isOpenedDescription);
+  };
+
+  const checkIfDescriptionIsTooLong = () => {
+    if (collapsedDescriptionRef.current)
+      setIsTooLongDescription(
+        collapsedDescriptionRef.current.scrollHeight > collapsedDescriptionRef.current.clientHeight
+      );
+  };
+
+  useOutsideClick(expandedDescriptionRef, () => setIsOpenedDescription(false));
+
+  useEffect(() => {
+    checkIfDescriptionIsTooLong();
+    window.addEventListener('resize', checkIfDescriptionIsTooLong);
+
+    return () => {
+      window.removeEventListener('resize', checkIfDescriptionIsTooLong);
+    };
+  }, []);
+
+  useEffect(checkIfDescriptionIsTooLong, [scenario.description]);
 
   return (
     <div>
@@ -30,10 +61,29 @@ const ScenarioDescription = ({
           {scenario.name}
         </span>
       </div>
-
       <div className="scenario-description">
         {scenario.description && (
-          <div className="scenario-details-description">{scenario.description}</div>
+          <div ref={collapsedDescriptionRef} className="scenario-details-description not-opened">
+            {scenario.description}
+            {isTooLongDescription && (
+              <span role="button" onClick={toggleDescription} tabIndex={0}>
+                (plus)
+              </span>
+            )}
+          </div>
+        )}
+        {isOpenedDescription && (
+          <div ref={expandedDescriptionRef} className="scenario-details-description opened">
+            {scenario.description}
+            <span
+              onClick={toggleDescription}
+              role="button"
+              tabIndex={0}
+              className="displayed-description"
+            >
+              <X />
+            </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,9 +141,9 @@
 
     .scenario-description {
       position: relative;
-      text-wrap: wrap;
 
       .scenario-details-description {
+        position: relative;
         color: var(--grey50);
         font-size: 0.875rem;
         font-weight: 400;
@@ -152,6 +152,44 @@
         word-break: break-all;
       }
 
+      .not-opened {
+        overflow: hidden;
+        max-height: 3.75rem;
+        max-width: 100%;
+        span {
+          padding-inline: 0.2188rem;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          background: rgba(222, 221, 214, 1);
+          color: var(--grey80);
+        }
+      }
+
+      .opened {
+        position: absolute;
+        top: 0;
+        left: -0.5rem;
+        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);
+        width: calc(100% + 7.5rem);
+        .displayed-description {
+          position: absolute;
+          top: 1rem - 0.3125rem;
+          right: 1rem;
+        }
+      }
+
       .scenario-collapse-button {
         position: absolute;
         padding-bottom: 0.188rem;
@@ -163,8 +201,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 +429,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;