White space at dashboard top side at 782px wide screen

[shreyasikhar]

Description

There is white space at the top of the dashboard when I edit the post at 782px screen size only. I tested this in the following themes: Twenty Twenty, Twenty Twenty-Three and Twenty Nineteen.

Issue video: https://share.cleanshot.com/2LNwPsrZ9FtSnyW98JmD

Step-by-step reproduction instructions

1. Open Post Edit screen
2. Switch to responsive mode from the inspector panel and set width to 782px

Screenshots, screen recording, code snippet

https://share.cleanshot.com/2LNwPsrZ9FtSnyW98JmD

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[sabernhardt]

This is the top of the Post editor in Fullscreen mode when the viewport is exactly 782 pixels wide.

The blank area was reported in the Site editor context years ago. It seems to have been fixed there already (though the template selection probably should behave differently at that width).

[jordesign]

Confirmed in my testing as well - it seems the space is reserved for the WP admin bar (which is only visible until 781px) but the space for it is maintained at 782px

[shreyasikhar]

Hello Everyone,
This issue is still reproducible. So, if any of you can check if the PR changes are good for this issue? or please tag the respective people to check, thanks.

cc: @jordesign @sabernhardt @apeatling

[sabernhardt]

The similar issue with the blank space next to the site editor's .edit-site-layout__sidebar-region panel was reported on Trac #60035, which may deserve its own issue in this repository.

781px seems to be a mistake, and I think the "adminbar goes big" comment could have led to the confusion. 782 is where the admin toolbar becomes taller with large icons, but that's for smaller screens up to 782 pixels wide (since MP6 in 2013). Gutenberg tends to use 782 as the min-width.

The breakpoint queries probably should be
(max-width: #{ ($break-medium) })
and
(min-width: #{ ($break-medium + 1) })
but never subtracting one.