Site editor responsiveness

[SaxonF]

What problem does this address?

As we expand data views in a way that requires more horizontal space we need to more strongly consider how to respond to various screen sizes.

What is your proposed solution?

Sidebar
Reduce sidebar to min width of 240px. If a particular page or plugin requires more space, it should be able to dynamically adjust the size. We are working towards removing detail views (e.g. page detail) from the sidebar and once we do that the need for extra width will mostly go away.

At 1440
There is enough horizontal space to contain the sidebar, the content frame in a minimised state (e.g. list views and the preview frame

At 1024

Tables start to scroll horizontally if need more space. Horizontal overflow when both content frame and preview frame are visible.

1024-scroll.mp4

At 768

Sidebar is condensed with the header of the sidebar visible above the two frames. Clicking site icon (or more menu icon) reveals fixed sidebar floating above. We horizontal scroll when content frame and preview frame are visible at the same time.

768-scroll.mp4

At 480
Much the same as 768 except preview frame is now hidden. List view types take a user directly to the editor on clicking (or whatever page is the primary action for other post types).