Admin menu collapse button inactive at 960px

[Webaxones]

If your browser is sized at 942px (942px on Chrome, 943px on Firefox) with the admin menu already collapsed, the collapse button appears to do nothing.
If user click on it, nothing happens.
And this happens because the media query targets a max-width of 960px instead of targeting 959.98px for example.
This may seem like a minor bug, but this screen dimension is exactly the one you get on a 1920px resolution screen when you ask your OS (windows for example) to display 2 browsers side by side: 2 WP admin screens with 2 buttons that don't work.

[sabernhardt]

Hi and thanks for the report!

The problem seems to be in the common.js file, not CSS.

viewportWidth < 960 did not include 960 pixels, so I switched the operator to less than or equal to 960.

[Webaxones]

Indeed. Sorry I didn't search any further because I thought the problem was unlikely to be qualified as a bug. I should have :)

Replying to sabernhardt:

Hi and thanks for the report!

The problem seems to be in the common.js file, not CSS.

viewportWidth < 960 did not include 960 pixels, so I switched the operator to less than or equal to 960.

[sabernhardt]

@Webaxones That comment was (more) for other people; you did not need to know exactly where the problem was. The fact that you found a bug and reported it is plenty :)

For anyone testing the patch:

1. Access a WordPress admin screen (page) with a desktop-sized monitor.
2. Adjust the browser window size so the side admin menu's auto-fold feature collapses the menu. Make sure the width is only one pixel narrower than where the side menu is expanded.
3. Click on the arrow link at the bottom to Expand Main Menu. This should not work correctly before applying the patch.
4. Apply the patch. Verify that the JavaScript compiles correctly and is not cached.
5. Refresh the browser at the same size.
6. Click on the arrow link at the bottom to Expand Main Menu. Verify that the menu expands now.

[audrasjb]

Can't reproduce the original issue on my side

[audrasjb]

Hmm ok thanks @sabernhardt for the sharing the testing process, now I understand why I wasn't able to reproduce the issue. I'll test again later today.

[Webaxones]

Here is a more telling visual demo:
On Windows, I open 2 windows, then snap the first one on the left by pressing the Windows Logo Key + Left Arrow, then snap the second one on the right by pressing the Windows Logo Key + Right Arrow.
-> Neither of the 2 collapse buttons works.

[Ankit K Gupta]

Test Report

Test Environment

• WordPress: 5.9-alpha-51272-src
• Browser: Google Chrome Version 94.0.4606.61 (Official Build) (x86_64)
• OS: macOS Big Sur V 11.5.1
• Theme: Twenty Twenty-One
• Web Server: nginx
• PHP & MySQL: 8.0.0 & 8.0.16
• Console Log: All fine
• WP Debug Log: All fine.

Steps to Test

1. Go to WP Dashboard.
2. Right click and click on the 'Inspect'option.
3. Click on kebab menu(three dots) and select 'Dock to right' option.
4. Now click on browser resizer option.
5. Select Dimensions 'Responsive'
6. Change the width to 960.
7. Click on 'Expand' menu icon.
8. This action will do nothing on click.
9. Apply patch file and build all assets.
10. Click on 'Expand'icon.
11. Menu will expand/collapse as expected.

Test Results

Menu Expand/Collaps actions are working expected on screen size 960px.

Test Status

Pass(on Mac)

PS: Would be great if someone also check once on Windows machine.

ScreenCast (videos)

Attached.

[Ankit K Gupta]

Status - Before fix

[Ankit K Gupta]

Status - After fix

[Ankit K Gupta]

Hello @Webaxones
Warm welcome on Trac and Thanks for creating the ticket :)

[abesell132]

This issue seems to be more widespread than just the admin menu. A similar bug can be replicated on the front end. Drop this code into any page or post to replicate:

<div id="change">This starts blue and turns red below 1400px</div>
<style>
    #change {color: blue;}

    @media only screen and (max-width:1400px) { #change { color: red;} }
</style>

From a screen width of 1384px to 1920px the color is blue. The 1400px max-width media query doesn't kick in until 1383px. (The text turns red 17 pixels late)

Test Environment
WP Version: 5.8.1
PHP Version: 7.3
Browser: All of em'
Theme: Twenty Twenty One
Web Server: Apache
Logs: Nothing

[sabernhardt]

@abesell132 When the media query style change starts acting at about 17 pixels less than the breakpoint value, that likely is because browsers include the scrollbar within that number. If the page does not have enough content to involve scrolling, however, then the window width should match the media query max-width.

[mai21]

Test Report

Reproducible and Fixed (click collapse button now is working on width 960, 961,959)

Env

• WordPress 5.9-alpha-51947
• Chrome 95.0.4638.54
• Ubuntu 18.04.6
• Theme: Twenty Twenty One

[audrasjb]

Thanks for testing @mai21

Marking this for commit.

[johnjamesjacoby]

In 51977:

Admin/Menu: include 960 exact pixel width in collapse measurements.

This change removes a 1 pixel gap in the measurement of the viewport width when clicking the "Collapse menu" button (at the bottom of the admin menu UI) when already collapsed, causing the menu not to open as intended when exactly 960 pixels wide.

Before this change, the menu would be stuck in the collapsed position. After this change, the menu opens as expected.

Props abesell132, ankit-k-gupta, audrasjb, boniu91, mai21, sabernhardt, webaxones.

Fixes #54210.