[wp-trac] [WordPress Trac] #32747: WP Admin Menus/SubMenus Overlap in small screen

[WordPress Trac]

#32747: WP Admin Menus/SubMenus Overlap in small screen
-------------------------------------+-------------------------------------
 Reporter:  turtlepod                |       Owner:  (none)
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  6.1
Component:  Administration           |     Version:  4.2.2
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch changes-       |     Focuses:  ui, accessibility,
  requested has-testing-info         |  javascript
-------------------------------------+-------------------------------------

Comment (by sabernhardt):

 I should have mentioned earlier that I was using Firefox and Edge on
 Windows.

 The patch generally helps, but it might be worse under specific
 conditions.

 ==== How to Meet the Odd Conditions

 1. Apply the patch. (I had trouble with NPM today, so I made the change
 directly in common.js, in a WordPress 6.1 Beta 1 installation.)
 2. Go to the Admin Dashboard, and open Screen options to hide all widgets
 except for "At A Glance" so the side menu is taller than the page content.
 3. Shrink the window width until the dashboard widget is in one column but
 the auto-folded menu is still visible on the side. The window width would
 be 783 to 799 pixels at default 100% zoom.
 4. Shrink the window height until the scrollbar appears.
 5. If using a mouse, hover the cursor over the Tools or Settings icon link
 to expand the sub-menu. The scrollbar will show that the page height is
 taller now, and some links are beyond the window height.
 6. Move the cursor over the expanded sub-menu. I was able to scroll down
 with the mouse wheel—and likewise with the Page Down key—while the cursor
 was still over the sub-menu. However, if anyone wants/needs to drag the
 scrollbar to view links beyond the window, moving the cursor away from the
 menu will collapse the sub-menu automatically. Also, when using the Tab
 key to navigate the menu, I needed to use the Page Down key (or down
 arrow) after every time I pressed Tab to see the focused link.
 7. Now move the cursor to another link in the side menu, and then return
 the cursor over the same icon link. In Firefox, the sub-menu expanded as
 expected. But Chrome and Edge got stuck in a recalculating loop and made
 the screen flicker with and without the sub-menu.

 ==== Environment

 Hardware: HP Laptop 15-da0xxx
 OS: Windows 10
 Browsers: Mozilla Firefox 105.0.1, Google Chrome 105.0.5195.127, Microsoft
 Edge 105.0.1343.50
 PHP: 7.4 (WampServer)
 WordPress: 6.1-beta1-54282-src

 I think it's related to a discrepancy between the JS measurement and CSS
 breakpoint when the scrollbar appears, but the CSS has a 799px/800px
 breakpoint.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/32747#comment:37>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform