It appears that the hats on the leaderboard are being cut off which forces them into a second row. This makes them look out of place and harder to see. (Example from MSE leaderboard below)

hat leaderboard

Next to the information about the user and the number of hats they have, seven hats fit on the first line, but 9 are being shown, with two cut off and stuck on the next line. It would make more sense if there were either two rows of hats (but up to 14 hats were shown) and added space, or just one row of seven hats.

  • 1
    Most probably this is after making it responsive. (IMO)
    – Wolgwang
    Dec 24 '21 at 18:01
  • 2
    This is normal behaviour of flex items with wrapping not disabled - items that do not fit on one line are pushed to the next row. I do not think they look "out of place" as this is normal and expected behaviour. What makes things harder to parse is the lack of increased gaps between rows or any visual separators between them, which would be a reasonable compromise methinks Dec 24 '21 at 22:19

The wrapping itself is normal and expected behavior with the Flexible Box Layout. If one inspects the styles applied, they will notice that each hat list container has a d-flex CSS class applied to it, and each hat representation - flex--item.

They will also notice that the container also has fw-wrap applied to it. The latter is of particular significance as it is a Stacks utility class that sets the flex-wrap CSS property to wrap, which is responsible for the wrapping of flex items when necessary (and the one you observed), for example:

hats list wrapped on 2 rows with 5 hats on row 1 and 3 on row 4

The "harder to see" part comes not from this behavior, but from the fact that the rows are not visually separated enough, making the hat lists for different rows visually merge into one giant grid of hat images which is far from ideal. There are a couple of methods for mitigating it.

Use a separator line

A leaderboard is just a fancy table, so it makes sense to use one of the classic row separators. The easiest way of adding it would be using border CSS shorthand property (or its constituent properties). With Stacks utility classes it is as simple as applying bb (border-bottom-* properties) and bc-black-[x] (border-color, where x is one of the valid values from the docs). This results in:

leaderboard rows with border separators

Increase margins between rows

Another classic method is increasing the spacing between rows to separate groups. One can utilize margins with my[x] (margin-top-* and margin-bottom-*, where x is one of the valid values) or padding with py[x] (padding-top-* and padding-bottom-*). The below is using the my24 utility class:

leaderboard rows with margin separators

Alternate row backgrounds

One more classic approach is to alternate row backgrounds (those who ever worked with office suites will immediately recognize the technique). This can be achieved with the :nth-child(<value>) pseudo-class with the value set to either a keyword (odd/even) or a formula (an-plus-b) to select rows and background-color to change the color.

The following demonstrates how one could do it (var(--<name>) notation uses CSS custom properties):

.js-leaders > .d-flex:nth-child(odd):not(.s-pagination) {
    background-color: var(--powder-100);

resulting in the following (I strongly suggest increasing margins too):

leaderboard rows with alternating background

Combined methods

For the best results one could combine several of the above methods, for example, adding borders and increasing margins:

combined methods example

The decision on what to implement is left as an exercise for Stack Exchange to do in 6 to 8 Winter Bashes.

  • 1
    Let loose 6-8 elves each equipped with The Key™ and I bet they can destroy that 6-8 Winter Bashes deadline
    – charlietfl
    Dec 25 '21 at 21:59

You must log in to answer this question.

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