I'm utilizing Grid to maintain the organization of the entire page, but I keep encountering an overflow issue when adding multiple Grid items. This results in the scrollbar appearing even though the container size remains the same. Dashboard.tsx is part of React-Router V6's Outlet, although it may not be relevant to the issue.
Apologies for any redundant code as I am still learning and navigating my way through this.
App.tsx (excerpt)
<Box sx={{ display: "flex" }} id="nav">
<NavBar />
<Box component="main" sx={{ flexGrow: 1 }} id="page-body">
<Toolbar />
<Outlet />
</Box>
</Box>
Dashboard.tsx
<Box
sx={{
padding: "20px"
}}
>
<Grid container>
<Typography variant="h3" sx={{ marginBottom: "20px" }}>
Dashboard
</Typography>
<Grid
container
item
xs={12}
component={LocalizationProvider}
dateAdapter={AdapterDayjs}
>
<Grid container item columnSpacing={2} rowSpacing={4}>
<Grid item container xs={12}>
<Grid
item
container
component={Card}
>
<JobDetailPieChart />
</Grid>
</Grid>
<Grid item container xs={12} lg={7}>
<Grid
item
container
component={Card}
>
<MachineRuntimeGantt />
</Grid>
</Grid>
<Grid item container xs={12} lg={5}>
<Grid
item
container
component={Card}
>
<DefectParetoChart />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
MachineRuntimeGantt.tsx (similar structure with other chart components)
<Grid item container component={Box} sx={{ padding: "20px" }} spacing={2}>
<Grid container item xs={12} alignItems="center">
<Grid item xs={6}>
<Typography variant={"h4"}>Machine Runtime</Typography>
</Grid>
<Grid item xs={6}>
<DatePicker
label="Select Month"
views={["month", "year"]}
aria-label="select-month-year"
value={selectDate}
onChange={(newDate) => {
setSelectDate(dayjs(newDate))
}}
slotProps={{
textField: {
fullWidth: true,
InputLabelProps: { shrink: true }
}
}}
/>
</Grid>
</Grid>
<Grid item xs={12}>
<Divider sx={{ borderBottomWidth: "4px" }} />
</Grid>
<Grid item xs={12}>
<HighchartsReact
highcharts={Highcharts}
options={options}
ref={chartComponentRef}
{...props.chart}
/>
</Grid>
<ChartLegend errorTypeList={errorTypeList} />
</Grid>
It appears that having multiple rows in the Grid causes an overflow issue, but the reason behind this is unclear to me.
The overflow occurs when including all three components or two of the same components. However, having the components on separate rows prevents this issue.