I am creating a modal with MUI. Currently, everything works fine except for the fact that on chrome, the textfield items inside of a grid container are being squished together. The weird thing is I don't have this problem on safari or on the CodeSandbox online editor. Also, the problem only occurs in the md and lg window sizes. I have pasted screenshots and my code below. I removed some things from the code (button functionality and such) so that it is easier to look at and just focus on styling.
return (
<Dialog open={true}>
<DialogTitle>Edit Dates</DialogTitle>
<DialogContent>
<Grid container spacing={2}>
<Grid xs={12} sm={12} md={12} lg={12}>
<DialogContentText>
Please enter the new dates for Cover Crop Planting, Biomass Harvest, Cover Crop
Termination, and Cash Planting in the text fields below. If you need to change a bag
pickup timing, leave a comment.
</DialogContentText>
</Grid>
<Grid item xs={12} sm={6} md={3} lg={3}>
<TextField
color="primary"
type="date"
id="Cover Crop Planting"
label="Cover Crop Planting"
variant="outlined"
InputLabelProps={{ shrink: true }}
/>
</Grid>
<Grid item xs={12} sm={6} md={3} lg={3}>
<TextField
color="primary"
type="date"
id="Biomass Harvest"
label="Biomass Harvest"
variant="outlined"
InputLabelProps={{ shrink: true }}
/>
</Grid>
<Grid item xs={12} sm={6} md={3} lg={3}>
<TextField
color="primary"
type="date"
id="Cover Crop Termination"
label="Cover Crop Temination"
variant="outlined"
InputLabelProps={{ shrink: true }}
/>
</Grid>
<Grid item xs={12} sm={6} md={3} lg={3}>
<TextField
color="primary"
type="date"
id="Cash Planting"
label="Cash Planting"
variant="outlined"
InputLabelProps={{ shrink: true }}
/>
</Grid>
<Grid item xs={6} sm={6} md={6} lg={6}>
<Button
color="primary"
variant="contained"
fullWidth={true}
>
Cancel
</Button>
</Grid>
<Grid item xs={6} sm={6} md={6} lg={6}>
<Button
color="primary"
variant="contained"
fullWidth={true}
>
Update
</Button>
</Grid>
</Grid>
</DialogContent>
</Dialog>
);
