Dashboard menu items 13 characters or more are mis-aligned

[rachelbaker]

Custom post type names (example: 'Downloadables' ) 13 characters or more longer are not broken into two lines, and are forced to second line.

Issue noticed in Google Chrome 32.0.1700.41 beta for OSX running trunk (last revision: r26614).

Screenshot attached.

[rachelbaker]

MP6 Dashboard with long single string Custom Post Type Names

[nacin]

What's with the icons? All deliberately missing?

[nacin]

This isn't a change from 3.7, but the font got a little bigger in 3.8. I was able to fit two more characters in 3.7 before it wrapped just the same.

One option is to decrease the right padding on #adminmenu div.wp-menu-name. Ideally a menu name never wraps anyway, and doesn't look great when it does, so if it hugs closely to the right side, that's not a big deal. I dropped it from 12px to 4px and was able to fit at least another character.

Maybe MT has some better ideas.

This is very similar to #25918.

[rachelbaker]

Yes, the icons just aren't defined. However, it would be nice to fit in another character with the slight padding reduction.

Replying to nacin:

This isn't a change from 3.7, but the font got a little bigger in 3.8. I was able to fit two more characters in 3.7 before it wrapped just the same.

One option is to decrease the right padding on #adminmenu div.wp-menu-name. Ideally a menu name never wraps anyway, and doesn't look great when it does, so if it hugs closely to the right side, that's not a big deal. I dropped it from 12px to 4px and was able to fit at least another character.

Maybe MT has some better ideas.

This is very similar to #25918.

[iammattthomas]

In 26766:

Provide a bit more horizontal space for .wp-menu-name. See #26452.

[iammattthomas]

r26766 adds a bit more room while still providing enough padding for words not to get overlapped by the arrow when it's the the active menu item. I didn't mark this as fixed because the issue still exists for longer words; rewriting the sidebar to use a fluid width could be an interesting future enhancement.

[nacin]

Based on IRC logs [26766] was originally going to remove the right padding all together. For the record, I think removing the right padding is a good idea. I'd rather have a word overlap the arrow than have the menu item wrap to a second line. This is especially true in the context of #25918. Right now, 111 pending comments wraps to the next line. Ouch; that's not uncommon. If we eliminate right padding, four-digits work in English. That's even with the comma, which we can eliminate as a last-ditch effort to save space in 3.8.

I think we're going to have to add a few pixels to the menu for things to work in other languages, because right now we're having trouble in English. :-) Maybe azaozz can figure out all of the magic numbers to adjust for that.

[iammattthomas]

In 26772:

Eliminate right padding on .wp-menu-name, see #26452.

[toscho]

Replying to nacin:

I think we're going to have to add a few pixels to the menu for things to work in other languages, because right now we're having trouble in English. :-) Maybe azaozz can figure out all of the magic numbers to adjust for that.

​IBM’s UI Guidelines have some interesting numbers. For very short text, you need up to 200% more space.

In German for example, every pixel is used. There is also the problem of ​Compound nouns: sometimes there is no space to break a word into two lines. An ugly workaround is a soft hyphen (U+00AD) in menu names. A little bit more room would really help.

[iammattthomas]

The fix for #25918 should also take care of this, so marking as duplicate.