How to set height & width of the mattermost plugin

Troubleshooting
3

Hi, I am using the web app plugin from here: Quick Start

Instead of displaying alert(), I use the registerRightHandSidebarComponent(…) to load a sample web app that is first loaded with an html page with height&width = 100%. When I click the plugin icon, the webapp is loaded as expected in the right-hand-side-bar. But the page width overlaps the chat message column/section partially. I think if I can set the width smaller, then it will look perfect. Here is the code in index.jsx:
initialize(registry, store) {

    // Immediately fetch the current plugin status.
    store.dispatch(getStatus());

    const {toggleRHSPlugin} = registry.registerRightHandSidebarComponent(App,"sample plugin test app");
    registry.registerChannelHeaderButtonAction(
        // icon - JSX element to use as the button's icon
        <Icon/>,
        () => store.dispatch(toggleRHSPlugin),
        "App Plugin",
        "Open App Plugin"
    );
    
    registry.registerReducer(reducer);

    // Fetch the current status whenever we recover an internet connection.
    registry.registerReconnectHandler(() => {
        store.dispatch(getStatus());
    });
    
}

Do you have any advise?

Thanks,
Charlie

Thanks,
Charlie