I’m developing a website about math things using Docusaurus (the latest release). I wanted to embed some geogebra. I use downloaded gbb files mainly because I don’t have the skills to set all up to use api.evalcommand() and similars. I’ve created a react component

import React, { useState, useEffect } from 'react';

const GeoGebraApplet = ({ filename, id }) => {
    const [adjustedFilename, setAdjustedFilename] = useState('');

    useEffect(() => {
        let newFilename = filename;
        if (!filename.startsWith('/')) {
            const currentPath = window.location.pathname;
            const basePath = currentPath.replace("docs", 'geogebra');
            newFilename = `${basePath}/${filename}`;
        }
        setAdjustedFilename(newFilename);
    }, [filename]);

    useEffect(() => {
        if (adjustedFilename) {
            const params = {
                filename: adjustedFilename,
                scaleContainerClass: 'geogebra-container',
                showMenuBar: false,
                showToolBar: false,
                preventFocus: true,
                showResetIcon: true,
                enableRightClick: false,
                allowUpscale: true,
                showFullscreenButton: true, 
                showAlgebraInput: false,
                autoHeight: true,
                borderRadius: 10,
            };
            const ggbApplet = new window.GGBApplet(params, true);
            ggbApplet.inject(id);
        }
    }, [adjustedFilename, id]);

    return <div className="geogebra-container"><div id={id}></div></div>;
};

export default GeoGebraApplet;

.geogebra-container {
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 5%;
}

When using it with 3D graphs, it all works good. The problem arises only when I use the component inside a <details> tag, and only for classic 2d geogebra graphs.

example image of the problem

When I click the reset button it renders fine.

I’ve already tried to set a determined container width

.geogebra-container {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
}

I presume the problem is in the automatic geogebra scaling feature.