25

Recently, this started happening:

image of the problem

Shog9 has an immense amount of badges, so many that the number creates a linebreak in the usercard, resulting in weird space below the usercard of the post's author. It also happens when a well-decorated user is the post's author; then the box is just extra tall:

picture with just one usercard

I first noticed it when looking at "The new edit rejection message for "no improvement whatsoever" sounds too hostile." The problem also appears on Stack Overflow:

Jon Skeet

I'm using Google Chrome 47.0.2526.73 on Windows 8.1 at 1920x1080 at the default zoom level.

Updated 12/26/2015: This is not fixed. It was, momentarily, fixed on Meta Stack Exchange (but not for Jon Skeet's usercard on Stack Overflow), but now the problem is happening again, even at the page I linked above.

After Winter Bash ended (tested 1/5/2016): It's still happening, both here and at Stack Overflow.

Related, maybe: Usernames can overflow the box
Related, definitely, but not a duplicate: Is there enough space in the user card for users who have a very large number of badges?

Improve this question
7
  • 8
    -1 for not using Jon Skeet as the example.
    – Mysticial
    Dec 10, 2015 at 2:46
  • 1
    @Mysticial is totally right. You can't possibly leave Jon Skeet out of such a bug report. Fixed. :-D
    – Shadow Wizard Is Sad And Angry
    Dec 10, 2015 at 7:22
  • This is a dupe of another similar, and equally pointless, question, but I care so little about the entire subject that I won't go looking for it. Might be on meta.so....
    – user1228
    Dec 10, 2015 at 15:05
  • 2
    The line wrap wouldn't be invasive if it didn't then push everything else on the page down. I noticed this when looking at the users list on one of my sites; the uneven row-to-row spacing jumped out at me, and is new. there's plenty of space between entries already, so it feels like even with the line wrap the user entry could be made to fit without affecting the overall layout. (I know it's a first-world problem, but between a positional memory and knowing how many page-down operations get me through the page -- except when they don't -- it bugs me a little.)
    – Monica Cellio
    Dec 10, 2015 at 16:10
  • This issue was brought up on Stack Overflow Meta. Can you provide links to the examples you took pictures of above so I can verify if the issue is still persisting?
    – Hynes
    Dec 14, 2015 at 21:44
  • @Hynes I took my screenshots from meta.stackexchange.com/q/242159/295684, but I don't know where Shadow Wizard got the Jon Skeet one from.
    – Ben N
    Dec 14, 2015 at 23:19
  • @Ben from Stack Overflow, see the reputation. :)
    – Shadow Wizard Is Sad And Angry
    Dec 15, 2015 at 20:57

1 Answer 1

Reset to default
4
+200

I've been playing around with this, and it won't work in the current design. If you want all badges to be on one line you need to change the width of <div class="post-signature flex--item fl0"> from 200px to 250px.

There are currently 2 of these items next to each other under a post, one for the information of the post owner, and one for the user that edited that post last. If I make the change described above on a random post this is the result:

enter image description here

You can see that the post links on the left have been crammed together, and that there is loads of white space around the usercards now, as these users don't have the amount of badges in the range that Shog9 has them. For his postsignature this looks relatively fine now with the increased width.

enter image description here

And truncating the amount of badges he has doesn't make all that much of a difference:

enter image description here

The real solution would be to have the badge indicator and the badge count stick together, and wrap to the new line together, that would make it far less ugly. That is actually quite easy. You can simply add white-space: nowrap; to .user-info .-flair. Downside is that the badge count now runs out of bounds, as you can see in the screenshot below, but for now that's acceptable (I think)

enter image description here

And on a larger view it looks like this:

enter image description here

This is however also bound to cause problems when users get loads of badges and edit other users posts:

enter image description here

Improve this answer

You must log in to answer this question.

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