Merge pull request #1405 from vitorRibeiro7/hotfix-game-minimun-specs-accordion
Some checks failed
Release / build (ubuntu-latest) (push) Has been cancelled
Release / build (windows-latest) (push) Has been cancelled

fix: fix css bug on requirements details style
This commit is contained in:
Chubby Granny Chaser 2025-01-17 16:09:17 +00:00 committed by GitHub
commit 8a30e946e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,5 +1,5 @@
import { ChevronDownIcon } from "@primer/octicons-react"; import { ChevronDownIcon } from "@primer/octicons-react";
import { useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import * as styles from "./sidebar-section.css"; import * as styles from "./sidebar-section.css";
@ -11,6 +11,15 @@ export interface SidebarSectionProps {
export function SidebarSection({ title, children }: SidebarSectionProps) { export function SidebarSection({ title, children }: SidebarSectionProps) {
const content = useRef<HTMLDivElement>(null); const content = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const [height, setHeight] = useState(0);
useEffect(() => {
if (content.current && content.current.scrollHeight !== height) {
setHeight(isOpen ? content.current.scrollHeight : 0);
} else if (!isOpen) {
setHeight(0);
}
}, [isOpen, children, height]);
return ( return (
<div> <div>
@ -26,7 +35,7 @@ export function SidebarSection({ title, children }: SidebarSectionProps) {
<div <div
ref={content} ref={content}
style={{ style={{
maxHeight: isOpen ? `${content.current?.scrollHeight}px` : "0", maxHeight: `${height}px`,
overflow: "hidden", overflow: "hidden",
transition: "max-height 0.4s cubic-bezier(0, 1, 0, 1)", transition: "max-height 0.4s cubic-bezier(0, 1, 0, 1)",
position: "relative", position: "relative",