feat: make auto margin fixed

martapanc · Sep 13, 2023 · f8e8542 · f8e8542
1 parent 584af57
commit f8e8542
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/components/organisms/projects/ProjectCard.tsx b/src/components/organisms/projects/ProjectCard.tsx
@@ -61,11 +61,22 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
     setActiveDiv(activeDiv === 'first' ? 'second' : 'first');
   };
 
+  const [autoMarginHeight, setAutoMarginHeight] = useState('auto');
+  const autoMarginRef: RefObject<HTMLDivElement> = useRef(null);
+
   useEffect(() => {
     if (cardRef.current) {
       // Calculate and set the initial height of the card content
       setCardHeight(cardRef.current.clientHeight + 'px');
     }
+
+    if (autoMarginRef.current) {
+      const computedStyle = window.getComputedStyle(autoMarginRef.current);
+      const mbValue = computedStyle.marginBottom;
+      const mbNumeric = parseFloat(mbValue);
+
+      setAutoMarginHeight(`${mbNumeric}px`);
+    }
   }, []);
 
   const iconColor = theme === 'dark' ? 'white' : 'black';
@@ -87,8 +98,10 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
         </h3>
 
         <div
-          className='text-justify md:font-light md:text-sm mb-auto'
+          ref={autoMarginRef}
+          className='text-justify md:font-light md:text-sm'
           aria-label='Project short description'
+          style={{ marginBottom: autoMarginHeight }}
         >
           <ReactMarkdown>{project.shortDescription}</ReactMarkdown>
         </div>