fixup! front: Change display when description is too long

Author: theocrsb

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

@@ -26,38 +26,63 @@ const ScenarioDescription = ({
   const { t } = useTranslation('operationalStudies/scenario');
   const { openModal } = useModal();
   const [isOpenedDescription, setIsOpenedDescription] = useState<boolean>(false);
-  const ref = useRef<HTMLInputElement | null>(null);
   const descriptionRef = useRef<HTMLDivElement | null>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [isTooLongDescription, setIsTooLongDescription] = useState<boolean>(false);
 
   const toggleDescription = () => {
     setIsOpenedDescription(!isOpenedDescription);
   };
 
+  const checkIfTooLong = () => {
+    if (ref && ref.current) {
+      ref.current.scrollHeight > 60
+        ? setIsTooLongDescription(true)
+        : setIsTooLongDescription(false);
+    }
+  };
+
   useOutsideClick(descriptionRef, () => setIsOpenedDescription(false));
 
+  useEffect(() => {
+    checkIfTooLong();
+    window.addEventListener('resize', checkIfTooLong);
+
+    return () => {
+      window.removeEventListener('resize', checkIfTooLong);
+    };
+  }, []);
+
+  useEffect(checkIfTooLong, [scenario.description]);
+
   return (
-    <div ref={ref}>
+    <div>
       <div className="scenario-details-name">
         <span className="flex-grow-1 scenario-name text-truncate" title={scenario.name}>
           {scenario.name}
         </span>
       </div>
-
       <div className="scenario-description">
         {scenario.description && (
-          <div
-            ref={descriptionRef}
-            title={isOpenedDescription ? '' : scenario.description}
-            className={`scenario-details-description ${isOpenedDescription ? 'opened' : 'not-opened'}`}
-          >
+          <div ref={ref} className="scenario-details-description not-opened">
+            {scenario.description}
+            {isTooLongDescription && (
+              <span role="button" onClick={toggleDescription} tabIndex={0}>
+                (plus)
+              </span>
+            )}
+          </div>
+        )}
+        {isOpenedDescription && (
+          <div ref={descriptionRef} className="scenario-details-description opened">
             {scenario.description}
             <span
               onClick={toggleDescription}
               role="button"
               tabIndex={0}
-              className={isOpenedDescription ? 'displayed-description' : 'display-description'}
+              className="displayed-description"
             >
-              {isOpenedDescription ? <X /> : '(plus)'}
+              <X />
             </span>
           </div>
         )}

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

@@ -143,6 +143,7 @@
       position: relative;
 
       .scenario-details-description {
+        position: relative;
         color: var(--grey50);
         font-size: 0.875rem;
         font-weight: 400;
@@ -154,21 +155,21 @@
       .not-opened {
         position: relative;
         overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-        .display-description {
+        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);
-          padding-inline: 0.2188rem;
         }
       }
 
       .opened {
         position: absolute;
+        top: 0;
         background-color: var(--white100);
         color: var(--grey80);
         padding: 3.375rem 3.5rem 3.125rem 3.5rem;