12

The review interface has recently (in the past day or so, I think) developed some alignment issues: the score and answer count are misaligned, and I don't remember that top section taking up so much space...perhaps the answer count wasn't there because it's also below? My memory's a bit fuzzy. Anyway, whatever it looked like before, it's currently kind of broken, visually. It's visible on any review taskā€”for example, this one, or this one with larger numbers that makes it more obvious (courtesy of Ollie in the comments).

review interface with misaligned answer/score

Screenshot and beautiful red circle courtesy of Scratte

I don't think this is related to the font changes, but I'm prepared to be told I'm wrong...

2
  • 3
    It's a lot more noticeable with more numbers: meta.stackexchange.com/review/suggested-edits/78155 Before, they were side-by-side. Perhaps the new font messed this one up?
    – Ollie
    Commented May 13, 2021 at 22:48
  • 1
    @Ollie Probably not the new fonts; some other undocumented change was the culprit, probably.
    – TylerH
    Commented May 20, 2021 at 13:29

2 Answers 2

7

This is the ruleset affected that results in the layout issue:

.s-post-summary--stats {
    --s-post-summary-stats-gap: 6px;
    margin-right: 8px;
    margin-bottom: -2px;
    width: 96px;
    display: flex;
    flex-direction: column; /* problem #1 */
    flex-shrink: 0;
    flex-wrap: wrap; /* problem #2 */
    align-items: flex-end;
    font-size: 12px;
    color: var(--fc-light);
}

And this is what fixes the issue:

  1. Remove the flex-direction: column; rule (this realigns the flex items in row order as this is the default for the flex-direction property)
  2. Remove the flex-wrap: wrap; rule (this prevents flex items from wrapping to the next line)

Here is how the summary section looks like before the change (broken):

summary section before the change

And here is how it looks like after the change (fixed):

summary section after the change

8
  • The vertical alignment is out with this fix as answer is lower than votes - at least to my eyes. Commented May 14, 2021 at 20:49
  • @DavidPostill - I only fixed the positioning :) Unfortunately, I didn't have a good reference as to how things looked at the time - someone just pointed the change out to me. But if you need proof that they are on the same baseline: i.sstatic.net/24YDu.png Commented May 14, 2021 at 20:54
  • 1
    It's my eyes then - or an optical illusion :) Commented May 14, 2021 at 20:58
  • @DavidPostill - same goes for the numbers baseline: i.sstatic.net/yzKYU.png :) But I suspect it feels this way because the border around the "answer" part adds more visual weight than the "hanging in the air" element Commented May 14, 2021 at 20:59
  • 1
    Agreed - it look right with the solid background. Commented May 14, 2021 at 21:03
  • @DavidPostill - yeah, I think it is a known optical illusion, give me some time, I will find a suitable reference :) With that said, I am not sure if the above fixes all of the changes made, there probably is another small issue with padding changing. Commented May 14, 2021 at 21:07
  • Don't worry about it - I'm not after a reference - it was just a random observation and I won't lose any sleep over it :) Commented May 14, 2021 at 21:10
  • @DavidPostill - you just got me interested myself, that's it :) Until you mentioned my perception was that they are both on the same line. I am not sure if this type of illusion has a name or if it is just a variation of the Poggendorff illusion. Commented May 14, 2021 at 21:19
4

With the new design for the review interface, this is now fixed: the answers and vote count now appear above the post title and are correctly spaced.

New interface with votes and answer count above the question title

2

You must log in to answer this question.

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