Sidebar selected item styling misalignment when scrollbar appears in collapsed state #4835
Description
Steps to reproduce
- Create a sidebar navigation with multiple items (enough to create a scrollbar)
- Set the collapsed state of the sidebar
- Select one of the navigation items
- Observe that when scrollbar appears, the selected item's highlight/indicator moves out of alignment with the actual item
Current behavior
No response
Expected behavior
No response
Context
No response
Your environment
npx @mui/envinfo
System:
OS: Windows 11 10.0.26200
Binaries:
Node: 22.9.0 - C:\Program Files\nodejs\node.EXE
npm: 11.2.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.12.3 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
Chrome: 135.0.7049.42
Edge: Chromium (135.0.3179.54)
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.0 => 11.14.0
@mui/base: 5.0.0-beta.40-1
@mui/core-downloads-tracker: 5.17.1
@mui/icons-material: ^7.0.1 => 7.0.1
@mui/joy: ^5.0.0-beta.52 => 5.0.0-beta.52
@mui/material: ^7.0.1 => 7.0.1
@mui/material-nextjs: ^7.0.0 => 7.0.0
@mui/private-theming: 7.0.1
@mui/styled-engine: 7.0.1
@mui/system: 7.0.1
@mui/types: 7.2.24
@mui/utils: 5.17.1
@mui/x-charts: ^7.28.0 => 7.28.0
@mui/x-charts-vendor: 7.20.0
@mui/x-data-grid: ^7.28.2 => 7.28.3
@mui/x-data-grid-premium: 7.28.3
@mui/x-data-grid-pro: 7.28.3
@mui/x-date-pickers: ^7.28.2 => 7.28.3
@mui/x-internals: 7.28.0
@mui/x-license: 7.28.0
@mui/x-tree-view: ^7.28.1 => 7.28.1
@toolpad/core: ^0.13.0 => 0.13.0
@toolpad/utils: 0.13.0
@types/react: ^19 => 19.1.0
react: ^19.0.0 => 19.1.0
react-dom: ^19.0.0 => 19.1.0
typescript: ^5 => 5.8.3
Search keywords: Toolpad sidebar, selected item misalignment, scrollbar, collapsed navigation, selection indicator offset
Metadata
Metadata
Assignees
Projects
Status