Fix: update accordion component to use min-height for smoother transi…

…tions
aelassas · Feb 13, 2025 · b885ca1 · b885ca1
1 parent 89484ea
commit b885ca1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/backend/src/assets/css/accordion.css b/backend/src/assets/css/accordion.css
@@ -48,11 +48,12 @@ div.accordion-container span.accordion-active::after {
 
 div.accordion-container div.panel {
   max-height: 0;
+  min-height: 0;
   overflow: hidden;
-  transition: max-height 0.23s ease-out;
+  transition: min-height 0.23s ease-out;
 }
 
 div.accordion-container div.panel-collapse {
   overflow: hidden;
-  transition: max-height 0.23s ease-out;
+  transition: min-height 0.23s ease-out;
 }
diff --git a/backend/src/components/Accordion.tsx b/backend/src/components/Accordion.tsx
@@ -17,22 +17,25 @@ const Accordion = ({
   offsetHeight = 0,
   children
 }: AccordionProps) => {
-  const accordionRef = useRef<HTMLSpanElement>(null)
+  const accordionRef = useRef<HTMLLabelElement>(null)
 
   const handleAccordionClick = (e: React.MouseEvent<HTMLElement>) => {
     e.currentTarget.classList.toggle('accordion-active')
     const panel = e.currentTarget.nextElementSibling as HTMLDivElement
     const _collapse = panel.classList.contains('panel-collapse')
 
-    if (panel.style.maxHeight || _collapse) {
+    if (panel.style.minHeight || _collapse) {
       if (_collapse) {
         panel.classList.remove('panel-collapse')
         panel.classList.add('panel')
+        panel.style.minHeight = ''
+        panel.style.maxHeight = '0'
       }
-
-      panel.style.maxHeight = ''
     } else {
-      panel.style.maxHeight = `${panel.scrollHeight}px`
+      panel.style.minHeight = `${panel.scrollHeight}px`
+      panel.style.maxHeight = ''
+      panel.classList.remove('panel')
+      panel.classList.add('panel-collapse')
     }
   }
 
@@ -45,7 +48,8 @@ const Accordion = ({
   useEffect(() => {
     if (collapse && accordionRef.current) {
       const panel = accordionRef.current.nextElementSibling as HTMLDivElement
-      panel.style.maxHeight = `${panel.scrollHeight + offsetHeight}px`
+      panel.style.minHeight = `${panel.scrollHeight + offsetHeight}px`
+      panel.style.maxHeight = ''
     }
   }, [offsetHeight]) // eslint-disable-line react-hooks/exhaustive-deps
 

diff --git a/frontend/src/assets/css/accordion.css b/frontend/src/assets/css/accordion.css
@@ -48,11 +48,12 @@ div.accordion-container span.accordion-active::after {
 
 div.accordion-container div.panel {
   max-height: 0;
+  min-height: 0;
   overflow: hidden;
-  transition: max-height 0.23s ease-out;
+  transition: min-height 0.23s ease-out;
 }
 
 div.accordion-container div.panel-collapse {
   overflow: hidden;
-  transition: max-height 0.23s ease-out;
+  transition: min-height 0.23s ease-out;
 }
diff --git a/frontend/src/components/Accordion.tsx b/frontend/src/components/Accordion.tsx
@@ -24,15 +24,18 @@ const Accordion = ({
     const panel = e.currentTarget.nextElementSibling as HTMLDivElement
     const _collapse = panel.classList.contains('panel-collapse')
 
-    if (panel.style.maxHeight || _collapse) {
+    if (panel.style.minHeight || _collapse) {
       if (_collapse) {
         panel.classList.remove('panel-collapse')
         panel.classList.add('panel')
+        panel.style.minHeight = ''
+        panel.style.maxHeight = '0'
       }
-
-      panel.style.maxHeight = ''
     } else {
-      panel.style.maxHeight = `${panel.scrollHeight}px`
+      panel.style.minHeight = `${panel.scrollHeight}px`
+      panel.style.maxHeight = ''
+      panel.classList.remove('panel')
+      panel.classList.add('panel-collapse')
     }
   }
 
@@ -45,7 +48,8 @@ const Accordion = ({
   useEffect(() => {
     if (collapse && accordionRef.current) {
       const panel = accordionRef.current.nextElementSibling as HTMLDivElement
-      panel.style.maxHeight = `${panel.scrollHeight + offsetHeight}px`
+      panel.style.minHeight = `${panel.scrollHeight + offsetHeight}px`
+      panel.style.maxHeight = ''
     }
   }, [offsetHeight]) // eslint-disable-line react-hooks/exhaustive-deps