Expanding Drawer side bar navigation doesn't trigger page breakpoints

Question

I'm using Mui's persistent drawer component and on my page are simple cards to display some text. When you expand the drawer the cards don't get affected by the breakpoints specified. Specifically for the xs breakpoint at 600px. Since the drawer takes up 239 px, is there a way to specify that the breakpoints are affected by the width of main part of the page which is wrapped in a Grid component, not including the width of the drawer as well?

       <Drawer variant="permanent" open={open}>
        <Toolbar
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-end",
            px: [1],
          }}
        >
          <IconButton onClick={toggleDrawer}>
            <ChevronLeftIcon />
          </IconButton>
        </Toolbar>
        <Divider />
        <List>{mainListItems}</List>
      </Drawer>

      <Grid
        component="main"
        sx={{
          flexGrow: 1,
          py: 8,
          height: "100vh",
          overflow: "auto",
        }}
      >
       <Container maxWidth={false}>
         <Grid container spacing={3}>
            <Grid item lg={3} sm={6} xl={3} xs={12}>
              <TotalClients />  //Card
            </Grid>

            <Grid item xl={3} lg={3} sm={6} xs={12}>
              <TotalPositions /> //Card
            </Grid>
         </Grid>
       </Container>
     </Grid>