20

I was browsing a question which was answered by Jon Skeet when I noticed this:

bug screenshot

The container which consists of the reputation and badges appears to not be large enough to fit everything in there. It also appears consistent amongst the high-rep/high-badge users: Marc Gravell, for instance:

enter image description here

This issue could be related to this question (and others), although in this case it is wrapped rather than being cut off. Is this the intended behavior? It seems as though having it wrap this way makes it a bit more difficult to associate what numbers go with what statistic.

At different magnification percentages everything will fit in a single line just fine, but at the default 100% magnification for me it was an issue.

I've been able to reproduce this issue in both Firefox (42.0-2) on Arch and Chrome on OS X.

2
  • When you get so much text you will either have to wrap the text or make it smaller (and harder to read), either way you go you will find someone who doesn't like it.
    – Joe W
    Commented Dec 9, 2015 at 19:52
  • @JoeW fair. Although the solution that was apparently implemented was increasing the width, which I guess was in addition to adding the wrapping. Commented Dec 9, 2015 at 19:54

2 Answers 2

10

Instead of having to widen the user cards to keep everything on one line every time this occurs due to the counts growing or even any unrelated layout changes, I suggest just letting the badge counts wrap, and instead adding display: inline-block to each badge count so at the very least the number doesn't get separated from the icon when wrapping:

.-flair > span:not(.reputation-score) {
    display: inline-block;
    margin-right: 3px;
    margin-left: 2px;
}
5

This is a bug and not by design. Thank you for bringing it to our attention. Unfortunately Jon Skeet and Marc Gravell are the extreme rare cases when it comes to large rep and badge totals. When we updated some items in the user cards recently, we didn't check this high edge case.

This has been fixed as you can see in this sample Jon Skeet answer.

Fixed Jon Skeet User Card

15
  • Great, thanks for clarification (for real this time!) That said, I'm still seeing the issue even after clearing my cache and restarting Firefox. Is the update not in production yet? (I'm testing at 100%/default magnification fwiw) Commented Dec 11, 2015 at 21:49
  • @ChrisSprague I believe it is in production. I've tested this in Chrome, Firefox, and IE and it looks as I pictured it above. It could be a CDN issue though. Give it some time. If you're still seeing the issue, please let me know. Thanks!
    – Hynes StaffMod
    Commented Dec 11, 2015 at 21:52
  • And now we wait until each of these users has 1K gold badges for this to happen again. But that's a ways out, at least. :)
    – Makoto
    Commented Dec 11, 2015 at 22:53
  • 8
    It looks to me like it has not been fixed
    – Travis J
    Commented Dec 14, 2015 at 23:01
  • 2
    @TravisJ Likewise, I'm still seeing the issue. Commented Dec 23, 2015 at 14:00
  • 9
    Still broken, unfortunately :(
    – Rob Mod
    Commented Jan 6, 2016 at 8:19
  • 3
    still broken for me Commented Jan 6, 2016 at 8:33
  • Yeah, this is back. :( It's noticeable both here on the post you link to and on other network sites (like Meta Stack Exchange).
    – hichris123
    Commented Feb 11, 2016 at 4:03
  • @Hynes still being reported at meta.stackoverflow.com/questions/319790/…
    – Jon Clements Mod
    Commented Mar 26, 2016 at 17:00
  • Not fixed (Firefox on Ubuntu) : i.sstatic.net/mxSHg.png
    – Majora320
    Commented Mar 26, 2016 at 17:30
  • Still not fixed on Chrome in Ubuntu 14.04. Commented Mar 27, 2016 at 8:38
  • As of June-12-2016, the profile / badges / reputation line wrapping is not fixed (win 7 x64 chrome and ie / win 10 x64 chrome / edge / ie). Commented Jun 12, 2016 at 15:58
  • @Hynes As of Nov. 17, 2016 it's still wrapping on Chrome (Windows 7 x64). Commented Nov 17, 2016 at 16:52
  • 4
    Just joined the "badge counts wrapping into the next line" club with my 100th gold badge.</humblebrag>
    – BoltClock Mod
    Commented Jan 2, 2017 at 5:42
  • This is still an issue meta.stackoverflow.com/questions/376838/…
    – StudioTime
    Commented Nov 20, 2018 at 10:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .