Pending comments count doesn't fit

[SergeyBiryukov]

In languages with longer words, the pending comments count in the admin menu doesn't fit (see the screenshot in Russian).

[SergeyBiryukov]

Related: #25858

[morganestes]

My 2 cents:

I started looking into alternatives today. Going from 150px to 165px across the menu will fix this particular case (and 3-digit counts) without messing up the rest of the admin too much, but there's a lot of flexibility needed to figure out what the longest text will be and adjust the margins for it. It can get out of hand pretty quick.

I don't think the overlapping bubble looks bad, actually, and it doesn't interfere with any other panel that I've seen.

[azaozz]

In 26447:

Fix pending comments/plugins count bubbles, fixes #25918

[SergeyBiryukov]

[26447] moves the bubble to the next line: 25918.26447.png​.

This works, but I wonder if we could increase the admin menu width on a per-language basis.

Generally, localized CSS goes to the corresponding section at the end of wp-admin.css. However, due to all the .folded and .auto-fold rules in this case, the patch is much smaller if the localized CSS comes right after the rules it needs to override. See 25918.patch​ vs. 25918.alt.patch​.

The result looks much better to me: 25918.after.png​.

[alexvorn2]

maybe to make font smaller?

[melchoyce]

SergeyBiryukov: That seems like a great solution. Would it still work for a 3-4 digit comment count?

[nofearinc]

SergeyBiryukov: are those code snippets meant to always live in wp-admin.css? Given the dozens of translations available, I'm not sure how many additional rules should be added for every language (or group of languages), plus what melchoyce said for higher comment counts.

[SergeyBiryukov]

With default values in comments

[SergeyBiryukov]

Replying to melchoyce:

SergeyBiryukov: That seems like a great solution. Would it still work for a 3-4 digit comment count?

3-4 digit comment counts would just wrap to a new line, like they do now: 25918.after.4-digits.png​.

Replying to nofearinc:

SergeyBiryukov: are those code snippets meant to always live in wp-admin.css? Given the dozens of translations available, I'm not sure how many additional rules should be added for every language (or group of languages), plus what melchoyce said for higher comment counts.

This isn't something every language would need, only the ones having longer words in the admin menu. I guess we сould try and see how many languages would require an extended admin menu width.

[nacin]

I think the width of the admin menu also affects a ton of media query breakpoints, right? Magic numbers, a lot of them. Or is that covered by the patch?

There are a few languages that would greatly benefit from this. German and Russian are the two that come to mind. But I haven't heard the complaint from too many over the years.

[azaozz]

Refreshed 25918.2.patch. Was breaking the responsive mode (782px) menu. Needed another level of specificity to all .auto-fold #adminmenu to override the .locale-*. Also needed #adminmenu .wp-submenu { width: auto; }.

Seems to be working well but still not 100% sure that it wouldn't break something. Was thinking: if this is a part of the localization package, would it be easier to fix bugs and push updates?

[azaozz]

25918.4.patch is a better version: doesn't touch .auto-fold on screen width <= 782px (doesn't interfere with the responsive menu).

[nacin]

Other possible solutions: hide the bubble if wraps to the next line, decrease the right padding (see also #26452), let it overlap (and go hidden).

[markjaquith]

25918.4.patch​ fixes the wrapping for 1, 2, and 3 digit numbers of comments in moderation, but lets it wrap for 4 (so, 1000+ comments awaiting moderation). I'm fine with that.

[ocean90]

25918-de_DE.png​ is how it looks in German currently.

25918-de_DE.2.png​ shows on the right side the 170px width, like for .locale-ru-ru. That's 10px to much in my eyes - 160px would be enough for us (1000+ will wrap, but that's okay). So is it okay to add another 78 lines or should we simply increase the default width by 10px?

[iammattthomas]

160px as a default width looks fine to my eyes.

[ocean90]

Increase admin menu width by 10px

[SergeyBiryukov]

With 160px as a default width, 2 digit numbers would fit in ru_RU (without any padding though: 25918-ru_RU-160px.png​), and 3 or more would wrap. Sounds like a good compromise.

[alexvorn2]

maybe to add an animation, to autoscroll the text from left to right on hover if needed... ? ​http://jsfiddle.net/yurik417/73daY/345/

[iammattthomas]

#26452 was marked as a duplicate.

[iammattthomas]

In 26817:

Expand adminmenu from 150px to 160px, creating more room for pending comment counts and translated text. Fixes #25918, props ocean90.

[iammattthomas]

Everything in 25918.5.patch looks good to my eyes, in LTR, RTL, desktop and responsive. This needs a decision, so I'm rolling with it.