Add a way to preview site in wider size in the Customizer

[Fab1en]

#31195 proposes to introduce a new UI in the customizer for previewing a site on different (smaller) device sizes. On top of that, that would be interesting to be able to preview a site on a wider size than the current display. This would be possible by adding scrollbars in the preview iframe.

[swissspidy]

That's something #31195 already aims to cover by allowing to set different breakpoints. Let's keep the discussion there.

[Fab1en]

That was a specific demand from @folletto to create a separate ticket on this particular issue.

why not enable people that have medium size displays to preview their site on a wide display ? That's possible if you extend the size of the iframe and use scrollbars.

I agree. This is definitely something I'd go for, even if likely in a separate issue and discussion, because I'd still start with this UI and then work to achieve that.

[celloexpressions]

Let's use this ticket to track the idea of implementing a way to force the preview to be larger than the available space after the initial device preview is implemented. Keeping this out of the scope of adding the initial UI in #31195 will help ensure we can get a first pass in for 4.5. This functionality is related, but distinct, and poses many more questions than are answered there.

A possible interaction for this would be to allow the three device buttons to be "unclicked" where the available space is used when no device is selected (and by default), but the selected device (including laptop/desktop) forces the preview size even if it's larger than what's available. This would also facilitate showing the device buttons on smaller screen sizes, but we'd need to make some decisions about how that would look.

[celloexpressions]

I would be interested in any thoughts here now that we have the base UI in.

[folletto]

A basic approach for this would be to keep the same UI, with a slightly different underlying logic:

1. It detects the current screen size.
2. Turns on the right responsive size icon, matching he appropriate range screen-size (i.e. if I'm on mobile, mobile will be turned on).
3. When a different icon is then clicked, it switches the resolution either wider (if on mobile) or narrower (if desktop, as it currently does) depending on the screen size.

I feel that this approach is the most contextual one while keeping the UI consistent across screens.

[westonruter]

Users could accomplish this by zooming out in their browser. If there really needs to be a UI for this, it could potentially do a transform on window in the iframe. That being said, this seems like plugin territory so I'm suggesting close.