Custom Dialog - Scroll Bars - Can they be removed?

I'm loosely following the custom dialog box example here:

https://github.com/MicrosoftDocs/powerbi-docs/blob/master/powerbi-docs/developer/visuals/create-display-dialog-box.md 

I'm using react to build a fairly complex dialog, but I've simplified for this example.

For this step: Create the dialog box implementation file I use this code instead:

export class TestDialog {
    static id = "TestDialog";
    private target: HTMLElement;
    
    private reactRoot: React.ComponentElement<any, any>;

    constructor(options: DialogConstructorOptions, initialState: object) {
        this.reactRoot = React.createElement(ReactTest, {});
        this.target = options.element;
        
        ReactDOM.render(this.reactRoot, this.target);
    }
}

globalThis.dialogRegistry = globalThis.dialogRegistry || {};
globalThis.dialogRegistry[TestDialog.id] = TestDialog;

The React component (ReactTest) called above is very simple:

export class ReactTest extends React.Component<{}>{
    render(){
        return (
            <div className="react-test-div">
                    Hello, React!  Whare are you up to today?  I've got some work for you to do.
            </div>
        )
    }
}

export default ReactTest;

Next I setup a new .css file called "ReactTest.css".  It's imported into the same file as the ReactTest class above.

.react-test-div {
    text-align: center;
    border: 3px solid green;
}

This is the dialog that renders with the above example, and it looks fine.  I did not expected the text to wrap inside the div though.

I want this wider, so I increased the width of the div:

.react-test-div {
    text-align: center;
    border: 3px solid green;
    width: 200px;
}

The rendered result:

And a little wider....

.react-test-div {
    text-align: center;
    border: 3px solid green;
    width: 400px;
}

Looking at the HTML, it appears that it is the parent iFrame element that generates the scrollbars.  The iFrame element expands with width and height of my child element, but it is always slightly smaller which causes the scroll bars to be generated.  (This happens of the height too)

Any idea how these scroll bars can be removed?  I haven't found a height and width setting for the dialog box, but the documentation is not very clear.

It would also be nice if the annoying message at the bottom could be removed as well.

Thanks!

William