My goal is to create a grid layout where the buttons align in the same row on desktop, stack with the search bar on one row and the rest of the row below it with some space on the left side. For mobile, I want the FilterButtons stacked on top of each other. I've tried many combinations but something seems off. Currently, it looks correct for desktop.
You can view the sandbox here: https://codesandbox.io/s/responsive-grid-u5uuud?file=/src/Responsive.jsx
This is my current code:
<Grid item lg={12} sm={12} xs={12} sx={{ mt: 2 }}>
<Grid container spacing={2} height="100%">
<Grid item lg={6} sm={6} xs={6} display="flex" alignItems="center" justifyContent="start">
<Typography fontSize={"20px"}>Applications</Typography>
</Grid>
<Grid item lg={6} sm={6} xs={6} display="flex" alignItems="center" justifyContent="end">
<Button sx={appStyle.newAppButton}>+ New Application</Button>
</Grid>
</Grid>
</Grid>
<Grid item lg={12} sm={12} xs={12} >
<Grid container spacing={0} height="100%">
<Grid item lg={3} sm={12} xs={12} display="flex" alignItems="center" justifyContent="start">
<TextField
type="search"
variant="outlined"
margin="normal"
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
/>
</Grid>
<Grid item lg={6} sm={0} xs={0} /> {/* empty column */}
<Grid item lg={2} sm={9.9} xs={12} display="flex" alignItems="center" justifyContent="end">
<FilterButton label="Product" options={productOptions} />
<FilterButton label="Application Status" options={applicationStatusOptions} />
<FilterButton label="Ticket Status" options={ticketStatusOptions} />
</Grid>
<Grid item lg={1} sm={1} xs={1} display="flex" alignItems="right" justifyContent="end">
<Button style={{ fontSize: "14px", width: "150px", whiteSpace: "nowrap" }}>Clear All Filters</Button>
</Grid>
</Grid>
</Grid>
This is how it should look on tablets: https://i.sstatic.net/WXHtv.png
And this is how it should look on mobile phones: