Admin bar length or Admin bar on two line

[korobochkin]

On some sites I see the bad admin bar.

And this without any external plugins stuff (Jetpack Statistic for example), except that buddy press notification counter.

The possible solutions, if screen too small:

1. Leave only icons (like on mobile screens).
2. Crop user name:
   • Hello, Kolya Korobochkin [avatar]
   • Hello, Kolya [avatar]
   • Hello [avatar]
   • [avatar]
3. Admin bar on two lines (maybe hard to do, because #wpadminbar have static height and position: fixed).
4. Add horizontal scroll without visible scrollbar (scrolling with mouse press and pull).

All options required JS and I'm sorry.

[morganestes]

Thanks for the ticket @korobochkin. Have you found that this happens at a consistent width with all plugins disabled, or does it depend on plugins that add menu items of different lengths?

[afercia]

There's no need for additional menu items to reproduce this, some languages have longer strings than the English ones, not to mention users may choose to display their (potentially very long) full name so there's just not enough space before the responsive media query kicks in.

Probably there's not a complete solution to this but maybe setting a max-width and using text-overflow: ellipsis; on the username link could help?
Not sure when this was introduced, setting version to 4.3.

[terminalpixel]

Patch to use flexbox within the admin bar

[terminalpixel]

I've created a fix for this that uses flexbox.

It is far from ideal but I think it is less buggy than the current issue. I cannot see a simple way to get a better result without either using JavaScript or reworking the admin bar html.

It should probably be tested with older browsers and plugins that make use of the admin bar.