Align with start instead of center

[MoshiKoi]

Resolves codidact/qpixel#1007

[cellio]

I'd like to request a review from https://github.com/Taeir but I can't enter that in the reviewers list.

[Taeir]

This change would affect more than the scores widget, right? For example this on the codesign website, i would expect the numbers to move to the left of the page.

Wouldnt it be better to have another class to more specifically state flex-start such that it overrides this definition?

[MoshiKoi]

Hmn, presumably yes. I wonder what the best way of doing that is though; should I create the utility class in co-design and then if that gets merged in create a new pull request on qpixel to add that class to the score?

[trichoplax]

It's not just a need to be more specific. The layout is also width dependent. So there are 2 separate questions to consider:

1. Are there things affected by the styling that we don't want to be affected?
2. For the things we do want to style, how do we want them to appear at different widths?

The example @Taeir gives also applies to real Codidact question lists. If you resize the page to be narrow enough (or view on mobile) then the vote counts switch to be horizontal rather than vertical. Currently they are horizontally centered in this narrow view, but this pull request causes them to no longer be horizontally centered.

A CSS media query (line 76 in the same file src/common/_itemlists.scss) switches the vote counts to be horizontal rather than vertical. This is done by changing flex direction to row for .item-list--number-value. If this pull request is changed to also specify justify-content: center at this point then the vote counts should be correctly not centered in the wide view (where they are vertical) and correctly centered in the narrow view (where they are horizontal).

It still might be useful to have a more specific CSS selector though:

The example is fine on a narrow page (unaffected by ticking or unticking justify-content: center):

The example loses the vertical centering for answers and votes on a wider page (most desktop screens):

In this case it is quite a subtle difference in the vertical positioning of the answer count and vote count (easier to see in the highlighted row), but I guess still probably to be avoided?

[MoshiKoi]

@trichoplax For what it's worth, the mobile view is off-center even now, due to the text being to the side. (The co-design website's examples are presumably a couple years out of date, given that they are completely different from qpixel proper.)

[trichoplax]

Ah I see. I was thinking of that as already centered because there is equal empty space on both sides. It hadn't occurred to me that it should be the text that is centered, with the bar moved left to accommodate this.

Would it be easier to raise a separate issue / meta post to see if people would prefer centering the bar and text together, or just the text? If that's going to be addressed separately then we could match current behaviour in the meantime by adding the following at line 104:

justify-content: center;

[MoshiKoi]

To be honest I think having the text to the side of the horizontal bar looks off regardless due to vertical height differences and such. Generally speaking the mobile view has quite a few problems with it that should probably get fixed at some point....