[docs-infra] Adjust demo container to be glued to the toolbar

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

Opening the PR to get a sense of how this feels. It's an exploration coming from @michaldudak's feedback that the code block feels disconnected now that the demo toolbar is part of the demo container itself. These changes make sense to me, but for some reason, I'm not 100% sure. Though definitely see how it can fly!

https://deploy-preview-37744--material-ui.netlify.app/joy-ui/react-button/#disabled

[michaldudak]

Nice, I like it more than the live version.

[oliviertassinari]

👍

[mui-bot]

Netlify deploy preview

https://deploy-preview-37744--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against fb6573e

[alexfauquette]

I was even wondering why not putting the code between the demo and action bar

[danilo-leal]

@alexfauquette that's not as ideal because lots of these code blocks ⎯ if not all ⎯ are expandable by clicking on the <> icon there. So, by having the toolbar at the bottom, the control to expand & collapse the code block would be going up & down, which is not great 😅 Also, I think the visual hierarchy (both visually and from the information standpoint) makes a bit more sense with Demo > Toolbar > Code as the toolbar doesn't necessarily affect the code snippet below, just what's up there in the demo container.

[alexfauquette]

the toolbar doesn't necessarily affect the code snippet below

there is only 2 buttons that so not affect the code (focus and reset)

My main concern was that the toolbar is in between so it feel a bit weird since usually toolbar are at the top/bottom of what they control. But yes putting it at the bottom has also serious issues

[danilo-leal]

@alexfauquette gotcha. Either way, we could continue to reflect on this outside the scope of this PR 😬

[oliviertassinari]

I have pushed two commits to integrate #37693 into this PR.

[danilo-leal]

@alexfauquette & @oliviertassinari need an approval now if we're feeling good about it! 😬

[danilo-leal]

For the sake of benchmarking: Ionic places the demo toolbar on the top of the demo container. I think it could make sense as well, however, I'd be slightly worried about this somewhat big change?! Wouldn't do it right now but just sharing it, I guess.