From bbcdb42708e8df56ca3204a0c791146730a72ac7 Mon Sep 17 00:00:00 2001
From: vitorRibeiro7 <vitorhugomelo5@gmail.com>
Date: Fri, 17 Jan 2025 11:55:03 -0300
Subject: [PATCH] ench: add dynamic height

---
 .../game-details/sidebar-section/sidebar-section.tsx   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx
index 4858cc0a..4b01adeb 100644
--- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx
+++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from "@primer/octicons-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import * as styles from "./sidebar-section.css";
 
@@ -11,6 +11,13 @@ export interface SidebarSectionProps {
 export function SidebarSection({ title, children }: SidebarSectionProps) {
   const content = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(true);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (content.current) {
+      setHeight(isOpen ? content.current.scrollHeight : 0);
+    }
+  }, [isOpen, children]);
 
   return (
     <div>
@@ -26,6 +33,7 @@ export function SidebarSection({ title, children }: SidebarSectionProps) {
       <div
         ref={content}
         style={{
+          maxHeight: `${height}px`,
           overflow: "hidden",
           transition: "max-height 0.4s cubic-bezier(0, 1, 0, 1)",
           position: "relative",