Inconsistent Drawer styles across browsers

[ebon kindle]

Is this behavior expected, or there is some issue to fix

some browsers show a scrollbar on the drawer some don't, and some browser add a margin to push the drawer from edge

[ebon kindle]

same issue with modals:

[ebon kindle]

AllComments.tsx

export const AllComments = ({ opened, close, comments }) => {
  const { t } = useTranslation();
  return (
    <Drawer.Root opened={opened} onClose={close} position='bottom'>
      <Drawer.Overlay />
      <Drawer.Content>
        <Drawer.Header>
          <Drawer.Title>{t('all_comments')}</Drawer.Title>
        </Drawer.Header>
        <Drawer.Body>
          <Stack>
            <Comments comments={comments} />
          </Stack>
        </Drawer.Body>
      </Drawer.Content>
    </Drawer.Root>
  );
};

Comments.tsx

export const Comments = ({
  comments,
}: {
  comments: SerializeFrom<typeof loader>['posts']['data'][0]['comments'];
}) => {
  return (
    <>
      {comments.length ? (
        <List icon={<ThemeIcon></ThemeIcon>}>
          {comments.map((comment) => (
            <React.Fragment key={comment.id}>
              <ListItem
                className={styles.comment}
                icon={
                  <Avatar
                    radius='md'
                    src={comment.user.profileImage}
                    name={getFullName(comment.user)}
                    color='initials'
                  />
                }
                w='100%'
              >
                <Text>{comment.content}</Text>

                <CommentActions />
                <Group w='100%' justify='space-between'>
                  <Text fz='xs' c='dimmed'>
                    {getFullName(comment.user)}
                  </Text>
                  <Text>{fromNow(comment.createdAt, 'ar')}</Text>
                  {/* {comment.reactions.length && (
                    <Group
                      className={styles.reactions}
                      bg='blue'
                      align='center'
                    >
                      <Avatar.Group>
                        {comment.reactions.map((r) => (
                          <Text key={r.id}>
                            <Icon
                              icon={getReactionIconData(r.type)?.icon as string}
                            />
                          </Text>
                        ))}
                        <Text>{comment.reactions.length}</Text>
                      </Avatar.Group>
                    </Group>
                  )} */}
                </Group>
              </ListItem>
              <Divider />
            </React.Fragment>
          ))}
        </List>
      ) : (
        <p>no post commments</p>
      )}
    </>
  );
};

[ebon kindle]

The issue happens only when the page content is more than 100vh height, in other words when there is a scrollbar on the screen side, does anyone know how to fix it?