Portion of MUI Accordion hidden behind browser bookmark bar when expanded-CodePudding

I am using an MUI accordion in an appBar. When I expand the accordion, it moves up a little bit causing the heading of the accordion to be hidden behind the browsers bookmark bar. Is there some method to prevent this from happening?

const useStyles = makeStyles((theme)) => {
    appBar: {
        borderBottom: "2px solid #D2D2D2",
        backgroundColor: "#fff",
        marginTop: "0px",
        height: "2.8vw",
    },
    appBarAcc: {
        // display: "flex", // Causes the accordion to expand horizontally
        flexDirection: "column",
        width: "auto",
        // padding: "0.8vw 0.4vw",
        "&:hover": {
            backgroundColor: "#B6B6B6",
        },
    },
}
...
                    <AppBar position="static" className={classes.appBar} elevation={0}>
                        <Toolbar variant="dense">
                            <Accordion className={classes.appBarAcc} elevation={0} TransitionProps={{ unmountOnExit: true }}>
                                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                                    <NotificationsNoneIcon
                                        style={{ color: "#636363", marginRight: "0.4vw", fontSize: "large", justifyContent: "center" }}
                                    />
                                    <Typography>Notifications</Typography>
                                </AccordionSummary>
                                <AccordionDetails>
                                    <Typography>No notifications</Typography>
                                </AccordionDetails>
                            </Accordion>
                        </Toolbar>
                    </AppBar>

CodePudding user response：

It moves up because it's a child of Toolbar element that is a flex with align-items: center.
So You should change Toolbar's style to align-items: flex-start;

const useStyles = makeStyles((theme)) => {
   ...styles,
   toolbar: {
      alignItems: "flex-start"
  }
}

<Toolbar variant="dense" className={classes.toolbar}>
   {children}
</Toolbar>