fixup! front: Change display when description is too long

Author: theocrsb

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

@@ -26,30 +26,13 @@ const ScenarioDescription = ({
   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 descriptionRef = useRef<HTMLDivElement | null>(null);
 
-  const showDescription = () => {
+  const toggleDescription = () => {
     setIsOpenedDescription(!isOpenedDescription);
   };
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (ref.current) {
-        setWidth(ref.current.offsetWidth);
-      }
-    };
-
-    handleResize();
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
   useOutsideClick(descriptionRef, () => setIsOpenedDescription(false));
 
   return (
@@ -66,11 +49,10 @@ const ScenarioDescription = ({
             ref={descriptionRef}
             title={isOpenedDescription ? '' : scenario.description}
             className={`scenario-details-description ${isOpenedDescription ? 'opened' : 'not-opened'}`}
-            style={{ width: isOpenedDescription ? width + 120 : width }}
           >
             {scenario.description}
             <span
-              onClick={showDescription}
+              onClick={toggleDescription}
               role="button"
               tabIndex={0}
               className={isOpenedDescription ? 'displayed-description' : 'display-description'}

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

@@ -182,6 +182,7 @@
           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;
           top: 1rem - 0.3125rem;