[DashboardLayout] Highlight and text alignment for mini#4844
[DashboardLayout] Highlight and text alignment for mini#4844bharatkashyap merged 3 commits intomui:masterfrom
Conversation
Netlify deploy preview |
| position: 'absolute', | ||
| bottom: -18, | ||
| left: '50%', | ||
| left: '45%', |
There was a problem hiding this comment.
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.
|
@apedroferreira I've changed the solution to use the Screen.Recording.2025-04-16.at.2.08.56.PM.mov |
apedroferreira
left a comment
apedroferreira
left a comment
There was a problem hiding this comment.
This seems a lot better, thanks a lot for the changes!
|
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 |
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 |
3 participants
Fix Sidebar selected item styling misalignment when scrollbar appears in collapsed state #4835
use the
MINI_DRAWER_WIDTHfor theuland passingscrollbar-gutter: stableto thenavwhenisMiniis set, everything being the same in all other modes.Screen.Recording.2025-04-16.at.2.08.56.PM.mov