10

There's something wrong with the vertical alignment on the Questions tab of a profile page:


(click to enlarge)

On the home page, which uses a similar list but without the Favorite column, the vertical alignment is correct.

(Tested in the latest Firefox, Safari and Chrome on macOS Catalina.)

5
  • 1
    ok, I must say that those red lines are much worse. I don't see them. What did you do? Commented Oct 31, 2019 at 19:06
  • 1
    It appears to be related to answer vs answers.
    – dfhwze
    Commented Oct 31, 2019 at 19:18
  • box-sizing: border-box; is the difference between both pages.
    – dfhwze
    Commented Oct 31, 2019 at 19:27
  • 4
    @JeffDarwood apologies for the lack of freehand circles, but the lines are there to make it clearer that the alignment is off.
    – Glorfindel Mod
    Commented Oct 31, 2019 at 21:13
  • Yet another pluralisation bug @dfhwze
    – Luuklag
    Commented Nov 1, 2019 at 13:28

2 Answers 2

3

I just noticed this myself as well, and thought about reporting it, only to find this post.

I decided to dig a bit deeper and I believe to have found the root cause. Take a look at the next two screenshots:

Answered question:
enter image description here

Unanswered question:
enter image description here

Question with multiple answers:
enter image description here

You can see that the width of the div's are different:
Questions with only 1 answer have a width of 51.15 and unanswered questions and questions with multiple answers have a width of 56.85. This of course boils down to the difference between "answers" and "answer", and the fact that the CSS uses a min-width of 44 px. Using a fixed with resolves the alignment issues.

If I tweak the CSS and make the width's equal, at 51.15, they all line up perfectly:
enter image description here

3

This is now fixed. As Luuklag pointed out, the issue had to do with the "answers" cell having different widths for questions with 1 answer or more than one answers (with the extra "s" accounting for a few more pixels). The entire section of votes/answers/views boxes now have a min-width set that will ensure that the left margin of the question titles are now once again vertically-aligned.

Note: this is still not fixed on the Spanish and Portuguese Stack Overflow sites (where the translations for answer/answers are a few pixels wider). However, a fix that works well everywhere is something that we are not going to do. The issue is incredibly subtle, and the page itself is queued up for getting a new UI (one that is responsive and will address these issues in a much better way than the current hacky fix).


Profile questions page
Subtle alignment issue
All in a row now

8
  • Good to hear that this page is scheduled to become responsive. I think it is one of the last pages (the profile page) that is really hard to use on a small viewport. Is there a more accurate estimate then 6-8 units of time regarding when it will receive some much needed TLC?
    – Luuklag
    Commented Jul 8, 2021 at 7:58
  • 1
    No timeline for this page in general. But I know that work has actually commenced in the long-awaited project of removing all of the mobile views and getting everything responsive across the site. But no idea when this specific view will get done. Commented Jul 8, 2021 at 7:59
  • Not fixed. See i.sstatic.net/ihBhm.png, which is from my profile here. The question titles are still misaligned. Commented Jul 8, 2021 at 8:03
  • I do see the changes made in the CSS @SonictheAnonymousHedgehog, but I think they are indeed not completely accurate. The min-width of 44 should work, but that is for the <div>answers</div>, it is set however at the <div class=status-unaswered> Seeing that the box surrounding the text is larger, the min-width would need to increase to something of about 57 to make it even. Or put the width on a different place in the CSS.
    – Luuklag
    Commented Jul 8, 2021 at 8:10
  • 1
    For those following at home, the new css is .user-show-new .user-tab-content .user-questions .question-counts { min-width: 152px; } Commented Jul 8, 2021 at 8:34
  • Ah I see @YaakovEllis, but that doesn't fix the issue for me. Width of that element with 1 answer is 153.917 and with no or multiple answers it is 161.45: i.sstatic.net/6pAE1.png
    – Luuklag
    Commented Jul 8, 2021 at 8:43
  • 1
    Have these changes been deployed already? I see a revision of yesterday in the footer (2021.7.7.39676) and it's still not aligned for me.
    – Glorfindel Mod
    Commented Jul 8, 2021 at 9:41
  • @Glorfindel for me it says rev 2021.7.8.39680, but still the bug persists., probably to do with my comment above.
    – Luuklag
    Commented Jul 8, 2021 at 11:04

You must log in to answer this question.

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