Toolbar: in small screens any plugin output breaks toolbar layout

[lancewillett]

What I expected to happen

When activating a plugin, it often adds text or icons to the toolbar. I'd expect them to not change the view or break the layout in small screens, like a mobile phone.

What actually happened

When I activated a plugin, and viewed the front-end of my site -- logged in -- with a mobile device, the layout was broken: the main content didn't fill the screen and my avatar was off the toolbar in the right gutter (see screenshot).

Steps to repeat

This only happens when logged in, and toolbar appears.

1. Latest trunk WP
2. Install and activate ​http://wordpress.org/plugins/rtl-tester/
3. Logged in, go to front-end on an iPhone
4. See broken toolbar: ​https://cloudup.com/cYLn6HBAEAG+

The text added by the plugin to the toolbar "Switch to RTL" breaks the layout.

Device and testing details

Tested with iPhone 5 in portrait and landscape mode on a self-hosted WP site running trunk and Twenty Fourteen, ​http://themebreaker.wordpress.net/. Only active plugin is RTL Tester.

[nacin]

I had mentioned this to MT; the prevailing thought was that maybe on tiny screens, we should instead hide all menus and explicitly only show the six we've chosen. Seems like that would work fine here. For more: #26071.

[iammattthomas]

In 26678:

By default, hide all adminbar links at responsive sizes and selectively un-hide just the essential core items. Fixes #26430.

[iammattthomas]

In 26680:

Allow dropdown lists to appear in responsive states; reset the minimum width of dropdowns at responsive sizes. See #26430.

[DrewAPicture]

I wonder if there's a way to make this a tiny bit more dynamic, even using something like a filter. I don't know.

Just seems odd that you now have to institute a CSS override just to show or hide toolbar items — items added via an API and hidden via CSS. Weird.

[iammattthomas]

The idea here is that there's no room on mobile devices for *any* additional items to be added by plugins, etc. So nothing should attempt to override this CSS; the point is to hide anything that's not an essential core link so that links added by plugins don't force the toolbar to wrap to two lines.

[Jayjdk]

Replying to iammattthomas:

In 26680:

Allow dropdown lists to appear in responsive states; reset the minimum width of dropdowns at responsive sizes. See #26430.

intrinsic is an old webkit value, the new one is fit-content (​https://developer.mozilla.org/en-US/docs/Web/CSS/width#Values).

fit-content will work in Firefox as well. Currently it requires vendor prefixes (​http://caniuse.com/#search=intrinsic)

#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper { 
   min-width: intrinsic;
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content; 
   min-width: fit-content; 
}

I've attached a patch.

[iammattthomas]

In 26735:

Add new fit-content rules to accompany intrinsic width on adminbar dropdown wrappers. Fixes #26430, props Jayjdk.