WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#26452 closed defect (bug) (duplicate)

Dashboard menu items 13 characters or more are mis-aligned

Reported by: rachelbaker Owned by:
Milestone: Priority: low
Severity: normal Version: 3.8
Component: Administration Keywords:
Focuses: Cc:
PR Number:

Description

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.

Attachments (2)

long-custom-post-type-names-not-broken-mp6.png (100.3 KB) - added by rachelbaker 6 years ago.
MP6 Dashboard with long single string Custom Post Type Names
menu-width-german.png (5.5 KB) - added by toscho 6 years ago.

Download all attachments as: .zip

Change History (14)

@rachelbaker
6 years ago

MP6 Dashboard with long single string Custom Post Type Names

#1 @toscho
6 years ago

  • Cc info@… added

#2 @nacin
6 years ago

What's with the icons? All deliberately missing?

#3 follow-up: @nacin
6 years ago

  • Milestone changed from Awaiting Review to 3.8

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.

#4 @nacin
6 years ago

  • Priority changed from normal to high

#5 @nacin
6 years ago

  • Priority changed from high to low

#6 in reply to: ↑ 3 @rachelbaker
6 years ago

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.

#7 @iammattthomas
6 years ago

In 26766:

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

#8 @iammattthomas
6 years ago

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.

#9 follow-up: @nacin
6 years ago

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.

#10 @iammattthomas
6 years ago

In 26772:

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

#11 in reply to: ↑ 9 @toscho
6 years ago

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.

#12 @iammattthomas
6 years ago

  • Milestone 3.8 deleted
  • Resolution set to duplicate
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.