Viewport switcher: fit zoom, visible width, a phone width

Problem/Motivation

Since #3629497: Render the Canvas in an iframe on the front theme the viewport switcher and the zoom sit in the Canvas header, and their width and zoom apply to the Preview too.

The switcher shows one icon button per theme breakpoint edge plus Responsive, and the width only appears in a hover title.
Its smallest width is the first breakpoint edge, 575px with UI Suite Bootstrap, so no button shows a real phone width.
The active button is only shown by its color, with no aria-pressed.

he zoom offers 25, 50, 75 and 100%, independent of the width: a wide device width in a narrow pane needs a guessed zoom, and in split view one zoom value serves two panes of different widths.

Other similar tools answer this with a "fit" zoom, or show the current width as a field.

Proposed resolution

Add a "Fit" zoom, the default, scaling each pane's iframe to the pane width divided by the device width, capped at 100%, and computed again when the pane resizes.
Show the active width as text next to the buttons, and add a phone width below the first breakpoint, 375px unless the theme defines one under 480px.
Above four widths, list them in a dropdown with their icon, name and width.
Add zoom out and zoom in buttons around the zoom value, with more steps, and aria-pressed on the width buttons.

Remaining tasks

• Fit zoom per pane, recomputed on sidebar resize and split ratio change.
• Check the scaled iframe after a refresh: it misses clicks for a moment, which Fit would make common.
• Visible width, phone width, dropdown above four widths.
• Zoom buttons and steps, maybe keyboard shortcuts, checked against the existing ones.
• aria-pressed on the width buttons.
• Tests.

User interface changes

The zoom fits the device width to the pane by default. The width shows as text, a phone width is offered, and many breakpoints collapse into a dropdown.

API changes

None.

Data model changes

None.