[DashboardLayout] Highlight and text alignment for mini

[bharatkashyap]

• Fix Sidebar selected item styling misalignment when scrollbar appears in collapsed state #4835

• use the MINI_DRAWER_WIDTH for the ul and passing scrollbar-gutter: stable to the nav when isMini is set, everything being the same in all other modes.

Before	After
	Screen.Recording.2025-04-16.at.2.08.56.PM.mov

[mui-bot]

Netlify deploy preview

https://deploy-preview-4844--mui-toolpad-docs.netlify.app/

Generated by 🚫 dangerJS against e360c1c

[apedroferreira]

I wouldn't change this, this is what is centering the text and it goes together with transform: 'translateX(-50%)' below.
And also the font size shouldn't be what is causing the issue and it shouldn't be changed unless necessary.

Can we not just set a minimum width somewhere so that the scrollbar doesn't make things narrower?
The current changes are only trying to disguise the problem but the content is not centered.
I can take a deeper look if it helps.

[bharatkashyap]

@apedroferreira I've changed the solution to use the MINI_DRAWER_WIDTH for the ul and passing scrollbar-gutter: stable to the nav when isMini is set, everything being the same in all other modes.

Screen.Recording.2025-04-16.at.2.08.56.PM.mov

[apedroferreira]

This seems a lot better, thanks a lot for the changes!

[apedroferreira]

Looks like there's a horizontal scrollbar when the sidebar is in mini mode now: https://deploy-preview-4809--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout

Maybe it'll be fixed if we remove a few pixels from the width?

[bharatkashyap]

Looks like there's a horizontal scrollbar when the sidebar is in mini mode now: https://deploy-preview-4809--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout

Maybe it'll be fixed if we remove a few pixels from the width?

We could do that or hide scrollbars on the container nav of the list, which approach do you think makes more sense? Either make sense to me, although the overflow-x: hidden on the container nav seems to be more robust since we never want horizontal scrollbars to appear in the sidebar

[apedroferreira]

Looks like there's a horizontal scrollbar when the sidebar is in mini mode now: https://deploy-preview-4809--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout
Maybe it'll be fixed if we remove a few pixels from the width?

We could do that or hide scrollbars on the container nav of the list, which approach do you think makes more sense? Either make sense to me, although the overflow-x: hidden on the container nav seems to be more robust since we never want horizontal scrollbars to appear in the sidebar

I would try to figure out why there is an overflow now - if it's related with having set a width in the items, I would try to fix something related to that. I don't mind taking a look soon.

[bharatkashyap]

Looks like there's a horizontal scrollbar when the sidebar is in mini mode now: https://deploy-preview-4809--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout
Maybe it'll be fixed if we remove a few pixels from the width?

We could do that or hide scrollbars on the container nav of the list, which approach do you think makes more sense? Either make sense to me, although the overflow-x: hidden on the container nav seems to be more robust since we never want horizontal scrollbars to appear in the sidebar

I would try to figure out why there is an overflow now - if it's related with having set a width in the items, I would try to fix something related to that. I don't mind taking a look soon.

The scrollbar is due to providing an explicit width to the list now - reducing the width makes the scrollbar go away but I haven't tested this fix rigorously over all device sizes. I can open a PR with that fix and you can take it forward/review it