WordPress Admin Nav Item breaks on responsive

[maxviewup]

• [x] I've searched for any related issues and avoided creating a duplicate issue.
• [x] I've read and understood the contribution guidelines.

Please give us a description of what happened.

The Yoast menu item on the WordPress Admin Nav breaks on responsive (below 360px). It makes the Avatar break into an new Line.

Hiding or resizing the menu item may solve the problem

How can we reproduce this behavior?

1.Open any page logged as Admin (with the admin bar enabled) 2.Resize your screen to 320px wide 3.See the WordPress navigation avatar broken

Technical info

• WordPress version: 4.9.2
• Yoast SEO version: Latest

[benvaassen]

This doesn't only happen when the screen is 320px or lower. Also happens when you have a long admin name and/or when your site title is long:

There is also a related core ticket for this here: https://core.trac.wordpress.org/ticket/28983

In core, there’s a rule that hides the toolbar items under 782 pixels, except the most important ones. But we’re overriding that rule to always show the Yoast icon in the admin bar. @jdevalk do we want to change this behavior?

[jdevalk]

We should change this and hide our toolbar menu item as @benvaassen suggest above.

[Djennez]

Looking at the current behavior, I am not sure if this is a bug related to Yoast. Before the viewport jumps to mobile mode, all items seem to be moved down one line.

The core track ticket in @benvaassen's post above also has a comment from @afercia that this is more of a core issue and not necessarily related to plugins. Can we close this on our end?

Edit: Re-read the OP. My browser does not allow me to go smaller than in the example below. And isn't this true for most modern devices? Are there still cases where people go below 300px?

[afercia]

Not sure there are devices with viewports smaller than 300 pixels today. However, the problem can be reproduced on a 320 pixels viewport width.

Post page on the front end, where there's also the "Edit" link (the pencil icon):

Other plugins, in this case Query Monitor, add their own link and it doesn't break:

The Yoast link breaks because it's slightly larger:

Of course, there's space for just one additional plugin link 🙂 And yes, core doesn't handle additional links very well. Regardless, maybe we could consider to make the Yoast link slightly smaller.