The page preview on tablet and smartphone looks dated due to the (old) iPhone and iPad frames we show it in. It's also disorienting as switching between two previews causes the page to start at a different location inside the viewport. We've heard it several time that the page preview should be reworked.

We're going to rework the page preview like this (see attachment 1 and attachment 2):

• We no longer show the frames of a tablet or a smartphone.
• We top-align a page preview with the black preview bar.
• When switching, we only change the width of the page, but always use the full available height.
• We have two options per mobile preview in the combobox in the preview bar, one for "landscape", one for "portrait".
• We expose the current resolution of the iframe in the status bar at the bottom.

Note that the main goal of this issue has been to remove the main pain points, and remove them quickly. We've thus designed a solution which we expect is somewhat easy to implement with the current means.

Widths to use

To remain aligned with how the current preview works, we'll stick with the widths of the original 1x resolutions of an iPad and an iPhone.

• Desktop: width of the viewport available for the iframe
• Tablet (landscape): 1024px
• Tablet (portrait): 768px
• Smartphone (landscape): 480px
• Smartphone (portrait): 320px

The plan is to eventually move to a preview allowing you to actually pick from multiple, typical resolutions for each mobile device type. See attachment 4 for an example from Mozilla Firefox's built-in web developer tools.