[Suggestion]: Page Style broke. a <br/> tag is needed.

[HiddenSyntax]

Summary

https://react.dev/learn/state-a-components-memory#giving-a-component-multiple-state-variables

In this chapter, there's an example demonstrating a toggle between "Show Details" and "Hide Details."

The button is styled as an inline-block, which disrupts the layout. Adding a <br /> element fixes the issue.

Page

https://react.dev/learn/state-a-components-memory#giving-a-component-multiple-state-variables

Details

export default function Gallery() {
    const [index, setIndex] = useState(0);
    const [showMore, setShowMore] = useState(false);

    function handleNextClick() {
        setIndex(index + 1);
    }

    function handleMoreClick() {
        setShowMore(!showMore);
    }

    let sculpture = sculptureList[index];
    return (
        <>
            <button onClick={handleNextClick}>Next</button>
            <h2>
                <i>{sculpture.name} </i>
                by {sculpture.artist}
            </h2>
            <h3>
                ({index + 1} of {sculptureList.length})
            </h3>
            <button onClick={handleMoreClick}>
                {showMore ? "Hide" : "Show"} details
            </button>
            {showMore && <p>{sculpture.description}</p>}

            // this br tag is added
            <br />


            <img src={sculpture.url} alt={sculpture.alt} />
        </>
    );
}

[AdityaSrivastava185]

Hello , I want to work on this issue , please assign this issue to me

[rickhanlonii]

I don't understand, the button is display: block?