✨ remove overflow visible from expandable content, because the animation is not smooth

BerndVerwohlt · BerndVerwohlt · commit 34ced751fb83 · 2025-05-06T17:23:42.000+02:00
diff --git a/packages/core/src/components/expandable-content/ExpandableContent.styles.ts b/packages/core/src/components/expandable-content/ExpandableContent.styles.ts
@@ -1,10 +1,6 @@
 import { motion } from 'motion/react';
 import styled from 'styled-components';
 
-type StyledMotionExpandableContentProps = {
-    $isOpen: boolean;
-};
-
-export const StyledMotionExpandableContent = styled(motion.div)<StyledMotionExpandableContentProps>`
-    overflow: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+export const StyledMotionExpandableContent = styled(motion.div)`
+    overflow: hidden;
 `;
diff --git a/packages/core/src/components/expandable-content/ExpandableContent.tsx b/packages/core/src/components/expandable-content/ExpandableContent.tsx
@@ -18,7 +18,6 @@ const ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>
         () => (
             <AnimatePresence initial={false}>
                 <StyledMotionExpandableContent
-                    $isOpen={isOpen}
                     animate={{ height: isOpen ? 'auto' : '0px' }}
                     transition={{ duration: 0.2, type: 'tween' }}
                 >

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,6 @@ const ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>`
`18`	`18`	`() => (`
`19`	`19`	`<AnimatePresence initial={false}>`
`20`	`20`	`<StyledMotionExpandableContent`
`21`		`- $isOpen={isOpen}`
`22`	`21`	`animate={{ height: isOpen ? 'auto' : '0px' }}`
`23`	`22`	`transition={{ duration: 0.2, type: 'tween' }}`
`24`	`23`	`>`