[DashboardLayout] Left-align header title in mobile viewport

[apedroferreira]

Closes #4111

Previously, the DashboardLayout header title in mobile viewports was center-aligned with absolute positioning.
However, when using the toolbarActions slot to add items to the header, problems with overlapping such as the one reported in #4111 could occur.

Simply using a statically positioned, left-aligned header title, just like the tablet and desktop viewports do, should solve this problem and even make more space available for additional actions in the header.

https://deploy-preview-4346--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout

[Janpot]

There's something wrong with the icon button in codesandbox:

Trying out the overflow behavior:

Screen.Recording.2024-11-01.at.21.50.29.mov

Some observations:

• The theme toggle stays aligned at the top (yet it does shift somewhat vertically)
• The title/menu stays center aligned.
• 🤔 I thought the theme toggle would (should) be part of the toolbar actions.

[bharatkashyap]

• 🤔 I thought the theme toggle would (should) be part of the toolbar actions.

That will happen with #4340

[Janpot]

My expectation of overflow would differ than this implementation. I think the actions should wrap, the same way it does in the PageContainer:

Screen.Recording.2024-11-02.at.13.59.19.mov

We could even consider accepting an array of actions so that we can wrap them separately.

edit: just noticed this is currently broken. It misses a flex-wrap. I fixed it in the devtools for this video.

[apedroferreira]

My expectation of overflow would differ than this implementation. I think the actions should wrap, the same way it does in the PageContainer:

Screen.Recording.2024-11-02.at.13.59.19.mov
We could even consider accepting an array of actions so that we can wrap them separately.

edit: just noticed this is currently broken. It misses a flex-wrap. I fixed it in the devtools for this video.

Good feedback! Hadn't checked that.
It made it so it wraps now, the marginLeft trick seems to do it!

Screen.Recording.2024-11-05.at.18.42.01.mov

We could even consider accepting an array of actions so that we can wrap them separately.

I gave it a brief attempt but wrapping and aligning multiple items to the right doesn't seem as straightforward, plus the account button is already a separate slot and not sure if we want it to wrap separately from the actions. So I guess we could keep that for later?

[prakhargupta1]

I just noticed a different approach to handle this and thought of sharing. Here the app name gets trimmed.

Screen.Recording.2024-11-06.at.10.12.11.AM.mov

[Janpot]

Here the app name gets trimmed

This doesn't feel like a fair comparison. that app doesn't optimize for mobile.

[prakhargupta1]

This doesn't feel like a fair comparison. that app doesn't optimize for mobile.

Hmm agree that's not the mobile view.