Halloped texts

src/components/Accordion/Accordion.tsx

@@ -38,15 +38,13 @@ const Container = styled.div`
   }
 `;
 
-const Panel = styled.div<{ visible?: boolean }>`
-  margin-top: ${(p) => (p.visible ? "0" : "-100%")};
-
+const Panel = styled.div<{ $visible?: boolean }>`
+  max-height: ${((p) => (p.$visible ? "1000vh" : "0"))};
+  transition: max-height 400ms ease-in-out;
   display: flex;
-  max-height: 15rem;
-  transition: margin-top 400ms ease-in-out;
 
   & > * {
-    padding-left: 1em;
+    padding: 0 1em;
   }
 `;
 
@@ -67,7 +65,7 @@ const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
         <h5>{title}</h5>
       </button>
       <div>
-        <Panel visible={isOpen}>
+        <Panel $visible={isOpen}>
           {children}
         </Panel>
       </div>