Misaligned MUI Popover when scrollbar appears

Question

I am using the MUI Popover that's linked to an icon. When the user engages with the icon, the Popver opens and the user has two options. I have also added a makeshift arrow up that is connected to this popover. The problem is if the icon moves in any way (i.e. zoomed-in screen or if the browser adds a scrollbar) my popover no longer aligns with the icon. I have added an image of the page zoomed in showing what the code is doing. Not sure how to fix this issue.

    <Popover
    open={avatarMenuOpen}
    anchorEl={anchorEl}
    onClose={handleAvatarMenuClose}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center'
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center'
    }}
    slotProps={{
      paper: {
        sx: {
          backgroundColor: 'transparent',
          minWidth: '317px'
        }
      }
    }}
  >
    <Box
      sx={{
        position: 'relative',
        mt: '10px',
        '&::before': {
          backgroundColor: 'white !important',
          content: '""',
          display: 'block',
          position: 'absolute',
          width: 12,
          height: 12,
          top: -6,
          transform: 'rotate(45deg)',
          right: isMobile ? 'calc(9% - 6px)' : 'calc(7% - 2px)',
          borderTop: `1px solid ${palette.grey[200]}`,
          borderLeft: `1px solid ${palette.grey[200]}`
        }
      }}
    />
    <Box
      sx={{
        p: 2,
        backgroundColor: 'white !important',
        boxShadow: '0px 4px 18px rgba(97, 97, 97, 0.1)'
      }}
    >
      <MenuItem
        component={ReactRouterLink}
        onClick={handleAvatarMenuClose}
        to={'/my-profile'}
      >
        <AirplanemodeActive color='error' />
        <Typography sx={{ paddingLeft: '12px' }}>Location 1</Typography>
      </MenuItem>
      <MenuItem onClick={handleLogOut}>
        <AirplanemodeActive color='primary' />
        <Typography sx={{ paddingLeft: '12px' }}>Location 2 </Typography>
      </MenuItem>
    </Box>
  </Popover>

Answer 1

SOLVED. Posting the solution in case anyone else has this issue in the future. My issue was having the arrow-up CSS and the overall look of the popover CSS in different Boxes. Once I moved all the logic to the popover, the popover moved as the screen size changed

 <Popover
        open={avatarMenuOpen}
        anchorEl={anchorEl}
        onClose={handleAvatarMenuClose}
        anchorOrigin={{ horizontal: 40, vertical: 'bottom' }}
        transformOrigin={{ horizontal: 'right', vertical: -10 }}
        slotProps={{
          paper: {
            sx: {
              overflow: 'visible',
              backgroundColor: `${palette.white.main} !important`,
              borderRadius: '16px',
              boxShadow: '0px 4px 18px rgba(97, 97, 97, 0.1)',
              border: `1px solid ${palette.grey[200]}`,
              minWidth: '317px',

              '&:before': {
                content: '""',
                display: 'block',
                position: 'absolute',
                top: -1,
                right: 20,
                width: 12,
                height: 12,
                backgroundColor: 'inherit',
                transform: 'translateY(-50%) rotate(45deg)'
              }
            }
          }
        }}
      >
 <Box
  sx={{
    p: 2,
  }}
>
  <MenuItem
    component={ReactRouterLink}
    onClick={handleAvatarMenuClose}
  >
    <AirplanemodeActive color='error' />
    <Typography sx={{ paddingLeft: '12px' }}>Location 1</Typography>
  </MenuItem>
  <MenuItem onClick={handleLogOut}>
    <AirplanemodeActive color='primary' />
    <Typography sx={{ paddingLeft: '12px' }}>Location 2 </Typography>
  </MenuItem>
</Box>