Responsive "layout preview" mode

[ghost]

Like TailwindUI have for showing their UI components, you can resize them to see the look of it in lower resolutions like tablet or mobile.

Media queries works because they use a iframe logic with the srcdoc attribute which allow you to pass HTML content directly inside this attribute.

Since it may be an heavy operation to have all those iframes, i think the way i see it is by adding a new layout action with a double horizontal arrow which generate on-the-fly the <iframe> below the div layout preview to avoid having a really big DOM with iframe for each layouts previewed (maybe it will not be that heavy to have all iframes loaded but hidden, need to do some tests).

So when this action is clicked, the div containing the preview is hidden and the iframe one shows instead.
A resize UI element display to test the layout behavior when you change it's width (only horizontal resizing)

To go out of resize mode, you have to click on the resize layout action which is the only layout action displayed in this mode (to avoid unexpected behavior) and we could even bind some keys to go out like ESC key maybe.

Screenshot