Fix overflow hidden

src/components/Card.css

@@ -18,6 +18,10 @@
   max-width: 100%;
 }
 
+.card-wrapper.overflow-hidden {
+    overflow: hidden;
+}
+
 @media screen and (max-width: 700px) {
     .card {
         margin: 0;

src/components/Card.js

@@ -1,28 +1,28 @@
-import React from 'react'
+import React from 'react'
-import './Card.css'
+import './Card.css'
-
+
-// fullWidth: boolean
+// fullWidth: boolean
-// show: boolean
+// show: boolean
-// doTransition: boolean
+// doTransition: boolean
-export function Card(props) {
+export function Card(props) {
-
+
-    const [showing, setShowing] = React.useState(false);
+    const [showing, setShowing] = React.useState(false);
-    const measureRef = React.useRef(null)
+    const measureRef = React.useRef(null)
-    const [height, setHeight] = React.useState(0);
+    const [height, setHeight] = React.useState(0);
-
+
-    React.useEffect(() => {
+    React.useEffect(() => {
-        if (!measureRef?.current) return;
+        if (!measureRef?.current) return;
-        setShowing(props.show);
+        setShowing(props.show);
-        setHeight(measureRef.current.clientHeight)
+        setHeight(measureRef.current.clientHeight)
-    }, [props.show, measureRef])
+    }, [props.show, measureRef])
-
+
-    return (
+    return (
-        <div className={`card-wrapper ${ props.fullWidth ? 'full' : '' }`} style={{
+        <div className={`card-wrapper ${ props.fullWidth ? 'full' : '' } ${ props.doTransition ? 'overflow-hidden' : '' }`} style={{
-            height: props.doTransition ? (showing ? height : 0) : "initial",
+            height: props.doTransition ? (showing ? height : 0) : "initial",
-        }}>
+        }}>
-            <div className={`card ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}>
+            <div className={`card ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}>
-                {props.children}
+                {props.children}
-            </div>
+            </div>
-        </div>
+        </div>
-    )
+    )
-}
+}