Large gap displayed to left of editor at browser widths of 782px and 960px.

[talldan]

Describe the bug
A large gap is displayed down the side of the editor at particular viewport widths (960px and 782px).

I have a feeling this bug has been around for a long time. It's pretty hard to spot, and I only noticed it when watching the end-to-end tests, which run at 960px. It's also more obvious with the background color that Twenty Twenty uses.

When the admin menu collapses at 960px and 782px, the Gutenberg layout only adjusts at 959px and 781px.

The issue seems to be happening because WordPress admin uses desktop first (max-width) media query breakpoints, while Gutenberg uses mobile first (min-width), so the media queries take effect at different widths.

To reproduce
Steps to reproduce the behavior:

1. Set the browser window width to 960px or 782px.
2. Observe that the editor has a white gap down the side.

Expected behavior
No gap is present.

Screenshots

[talldan]

An easy fix is to change the breakpoints to 783px and 961px in Gutenberg, not sure if that's something we'd consider though. All the breakpoints should probably be off-by-one, but it's only these two that cause a visual issue.

The other, probably better option is to rely on browser layout rather than setting a specific left value on the .edit-post-layout.

[youknowriad]

we have an editor-left mixin to assign the right "left" value. The problem is that there's so many use-cases/variations in Core and we're probably missing one (sidebar open, closed, auto-folded, responsive...)

[jorgefilipecosta]

The problem for 960px was solved we should apply a similar fix to 5945e48 to fix the 782 breakpoint.