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

Trying out the overflow behavior:

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.

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

That will happen with #4340

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

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.

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!

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?

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

Here the app name gets trimmed

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

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

Hmm agree that's not the mobile view.