[docs-infra] Support full screen / screen-size switcher for demos

[bharatkashyap]

Context

• To better demonstrate the responsiveness feature on Toolpad Core's DashboardLayout component [core] Make DashboardLayout navigation responsive toolpad#3750 and other responsive components we create in the future as part of Toolpad Core

Benchmarks

• Based off the screen-size switcher for https://ui.shadcn.com/blocks, we could add a version of that to our demos as well, placed similar to the styling system switcher on https://mui.com/base-ui/react-autocomplete/

• DevExpress full-screen button https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/Common/NavigationOverview/MaterialBlueLight/

Solution

Search keywords:

Search keywords:

[oliviertassinari]

This would need to be combined with "iframe": true to work.

Up to now, my method to test mobile was to either open the dev tools, it gets me down to 800px width, and then enable the mobile emulator on the docs. I have some doubts about the importance of this pain. It might be a high opportunity cost to others.

[bharatkashyap]

I have some doubts about the importance of this pain. It might be a high opportunity cost to others.

I think the pain is larger in the context of layout components, when being able to demonstrate how the component behaves both on large screen sizes and mobile can be an important selling point. We could emulate the behaviour of the switcher on https://mui-blocks.netlify.app/content