[wp-trac] [WordPress Trac] #44438: Prevent Admin Bar Items From Wrapping if There's More Items Than the Available Adminbar Width

[WordPress Trac]

#44438: Prevent Admin Bar Items From Wrapping if There's More Items Than the
Available Adminbar Width
-------------------------+-------------------------------------------------
 Reporter:  KZeni        |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Toolbar      |    Version:  4.9.6
 Severity:  normal       |   Keywords:  needs-testing has-patch has-
  Focuses:  ui,          |  screenshots
  administration         |
-------------------------+-------------------------------------------------
 I have a few sites where the number of plugins, etc. being used on the
 site has lead to the admin toolbar on a desktop browser wrapping to a
 second line. This then makes it so the drop down menu for the first row of
 items can't be accessed since the user then has the hover be hijacked by
 the second row item which is overlaid on top of the resulting drop down.
 This seems like a rather serious usability bug that should be addressed.

 I have a proposed patch which would make the desktop size of the admin bar
 use flex layout in conjunction with overflow & text-overflow to make it so
 this problem isn't encountered. Meanwhile, the tablet & mobile sizes for
 the admin bar are unaffected due to the @media query being used to isolate
 this to 782px or wider browsers).

 1. **Screenshot of before (current WordPress behavior):**
 https://cloudup.com/cXkSHQN1UbX
         - Notice that moving the mouse down on the My Sites drop down can
 be intercepted by the Forms menu & the same can be said for the
 Performance menu being intercepted by the secondary menu items; this
 becomes more of an issue with narrower browsers & with more items in the
 admin bar.)
 2. **Screenshot after (using the exact CSS I'm proposing here):**
 https://cloudup.com/cEO--F1sMsC
         - Everything is accessible, nothing is wrapping, and the icons are
 still visible where the full text cannot be shown; was better than before
 visually & in terms of usability.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/44438>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform