Description
@izmeez mentioned this problem while testing #6526:
The only issue I have encountered, that may be expected, is with a narrow screen and a larger font size such as 16px showing overlap with any of the themes. I haven't actually tested this with a mobile device. I can't imagine using such a large font on a mobile device so it may be out of scope.
That may be an edge case perhaps, but think accessibility-wise as well here: there's a lot of people that increase the font size on mobile devices because of vision impairments/conditions (age-related farsightedness comes to mind as a common use case). That may cause this weird style of the admin bar menus.
Proposed solution
We could consider styling the 3 mobile-mode top-level menu items in the sidebar a bit differently in narrow screens, to be similar to the UI that some phone apps have, where the icons are positioned above the respective labels. That should make more horizontal room for the labels (would also work better with languages where the labels are lengthier), while at the same time keeping a consistent style. Quick mockup:
Would only take a couple of lines of CSS roughly:
ul.dropdown span.admin-bar-link-icon {
display: block;
text-align: center;
}