I'm in the process of setting up a basic layout for a single-page application using Material-ui and React. My plan is to have a sidebar on the left-hand side and a main area on the right-hand side to display information. However, I am facing two issues with my current setup:
The <Grid item> and its container <Button> elements are extending beyond the left sidebar
<Grid container item xs={3} className={classes.sideBarGrid}>I'm also struggling to get the right-hand grid column
<Grid container item xs={9} className={classes.labelGrid}>width: "100%".
Code snippet:
import React from "react";
// other module imports...
export default function Labelscreen(props) {
const classes = useStyles();
// additional code snippets omitted...
}
UPDATE
It appears that the gray area on the right side isn't fully occupying the screen when the screen size is large, despite setting the width to 100% in the labelGrid.