Menu overflow outside window #7953
Description
Dependencies check up
- I have verified that I use latest version of all @mantine/* packages
What version of @mantine/* packages do you have in package.json?
8.1.0
What package has an issue?
@mantine/core
What framework do you use?
Vite
In which browsers you can reproduce the issue?
All
Describe the bug
After update from 8.0.1 -> 8.1.0 my user menu overflow outside window. In attachement I have screenshot from my menu. After click on user button in my navigation footer, my user menu is open, but in new version I can't see Sign out item because is outside main window.
v8.0.1
v8.1.0
Code:
<Menu withArrow position={isMobile ? 'top' : 'right'} opened={opened} onChange={handlers.toggle}>
<Menu.Target>
<UnstyledButton className={css.user}>
<Group>
{user.photo ? (
<Avatar key={user.id} src={user.photo} radius="xl" />
) : (
<Avatar key={user.id} name={user.name} color="initials" />
)}
<div style={{ flex: 1 }}>
<Text size="sm" fw={500}>
{user.name}
</Text>
<Text c="dimmed" size="xs">
{user.email}
</Text>
</div>
{opened ? (
<IconChevronLeft size={14} stroke={1.5} />
) : (
<IconChevronRight size={14} stroke={1.5} />
)}
</Group>
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>My account</Menu.Label>
<Menu.Item leftSection={<IconSettings size={14} />} onClick={() => navigate('/settings')} disabled={!user.roles.includes('admin')}>Settings</Menu.Item>
<Menu.Item leftSection={<IconLock size={14} />} onClick={() => openChangePassword()}>Change password</Menu.Item>
<Menu.Divider />
<Menu.Item color="red" leftSection={<IconLogout size={14} />} onClick={logout}>Sign out</Menu.Item>
</Menu.Dropdown>
</Menu>
If possible, include a link to a codesandbox with a minimal reproduction
No response
Possible fix
No response
Self-service
- I would be willing to implement a fix for this issue