fixup! front: Change display when description is too long

Author: theocrsb

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

@@ -26,34 +26,33 @@ const ScenarioDescription = ({
   const { t } = useTranslation('operationalStudies/scenario');
   const { openModal } = useModal();
   const [isOpenedDescription, setIsOpenedDescription] = useState<boolean>(false);
-  const descriptionRef = useRef<HTMLDivElement | null>(null);
-  const ref = useRef<HTMLDivElement | null>(null);
+  const expandedDescriptionRef = useRef<HTMLDivElement | null>(null);
+  const collapsedDescriptionRef = 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);
-    }
+  const checkIfDescriptionIsTooLong = () => {
+    if (collapsedDescriptionRef.current)
+      setIsTooLongDescription(
+        collapsedDescriptionRef.current.scrollHeight > collapsedDescriptionRef.current.clientHeight
+      );
   };
 
-  useOutsideClick(descriptionRef, () => setIsOpenedDescription(false));
+  useOutsideClick(expandedDescriptionRef, () => setIsOpenedDescription(false));
 
   useEffect(() => {
-    checkIfTooLong();
-    window.addEventListener('resize', checkIfTooLong);
+    checkIfDescriptionIsTooLong();
+    window.addEventListener('resize', checkIfDescriptionIsTooLong);
 
     return () => {
-      window.removeEventListener('resize', checkIfTooLong);
+      window.removeEventListener('resize', checkIfDescriptionIsTooLong);
     };
   }, []);
 
-  useEffect(checkIfTooLong, [scenario.description]);
+  useEffect(checkIfDescriptionIsTooLong, [scenario.description]);
 
   return (
     <div>
@@ -64,7 +63,7 @@ const ScenarioDescription = ({
       </div>
       <div className="scenario-description">
         {scenario.description && (
-          <div ref={ref} className="scenario-details-description not-opened">
+          <div ref={collapsedDescriptionRef} className="scenario-details-description not-opened">
             {scenario.description}
             {isTooLongDescription && (
               <span role="button" onClick={toggleDescription} tabIndex={0}>
@@ -74,7 +73,7 @@ const ScenarioDescription = ({
           </div>
         )}
         {isOpenedDescription && (
-          <div ref={descriptionRef} className="scenario-details-description opened">
+          <div ref={expandedDescriptionRef} className="scenario-details-description opened">
             {scenario.description}
             <span
               onClick={toggleDescription}

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

@@ -153,7 +153,6 @@
       }
 
       .not-opened {
-        position: relative;
         overflow: hidden;
         max-height: 3.75rem;
         max-width: 100%;
@@ -170,6 +169,7 @@
       .opened {
         position: absolute;
         top: 0;
+        left: -0.5rem;
         background-color: var(--white100);
         color: var(--grey80);
         padding: 3.375rem 3.5rem 3.125rem 3.5rem;
@@ -182,7 +182,6 @@
           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);
         width: calc(100% + 7.5rem);
         .displayed-description {
           position: absolute;