Badge count numbers are too close to the badge icons

Question

This is probably just a little CSS spacing issue, but with the recent redesigned site theme, there is a little extra ugliness around the user card. The numbers next to the badge icons bump right up against the icons. (Some numbers like 2, 3, and 5 are worse than others. Other numbers might be less noticeable.)

Screenshot below. Notice how the "5" bumps right into the gold badge, and the "2" touches the silver badge both above and below.

(This only affects the main site. Arqade meta does not exhibit this problem.)

Answer 1

Thanks for the bug report!

The placement of badges has perennially been an issue for us. It's actually one of the bugs we've talked about that gets reintroduced often when we make changes to the sites. It's one of the reasons we've switched to the unified themes and why we weren't going to retain custom badges initially.

The root cause is that the badges are slightly different shapes/sizes on all of the sites, so how they're positioned is special for each site - some are wider, others are taller - so positioning each perfectly on every site simultaneously with one setting is difficult. To avoid this being a problem in the future, we'll need to make some adjustments but we are working on it.

To quote one of the designers elsewhere:

Network-wide we'll be revisiting the sizes of these glyphs after the new themes launch everywhere. Some themes have bigger badges than others and it's causing display issues between themes, this one included. Thanks for reporting! It'll get fixed when we refactor how badges are displayed.

This is on the horizon to be looked at, though not sure how soon... and, hopefully, once completed, this won't be a problem moving forward.

Answer 2

Interesting. It does seem CSS related. In Chrome I inspected it and changed the padding just by a few pixels and it looks better.

Current (0px):

Modified (3px):

Perhaps this class was changed to 0px by mistake?

Edit:

Since you said that the Meta site does not exhibit this problem, I decided to compare the two sites and found that the .badge1 CSS class is different between the two:

The left side is the meta sites CSS, and the right side is the main sites:

The difference is the X value for the background-position property. That 2px difference is what is causing the numbers to press up against the badge. So actually, its the badges class that is causing this, not the badge count's class. I found that there is a 2px difference for each of the 3 badges between the two sites. The picture above was just for the gold badge icon. Each badge icon has its own class (badge1 = gold, badge2 = silver, badge3 = bronze).