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 May 13 at 22:48
  • 1
    @Ollie Probably not the new fonts; some other undocumented change was the culprit, probably. – TylerH May 20 at 13:29
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. – DavidPostill May 14 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.stack.imgur.com/24YDu.png – Oleg Valter May 14 at 20:54
  • 1
    It's my eyes then - or an optical illusion :) – DavidPostill May 14 at 20:58
  • @DavidPostill - same goes for the numbers baseline: i.stack.imgur.com/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 – Oleg Valter May 14 at 20:59
  • 1
    Agreed - it look right with the solid background. – DavidPostill May 14 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. – Oleg Valter May 14 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 :) – DavidPostill May 14 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. – Oleg Valter May 14 at 21:19

You must log in to answer this question.

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