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.)

Improve this question
5
  • 1
    ok, I must say that those red lines are much worse. I don't see them. What did you do?
    – Jeff Darwood
    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

Reset to default
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

Improve this answer
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

Improve this answer
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.
    – Yaakov Ellis StaffMod
    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.
    – Sonic the Anonymous Hedgehog
    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; }
    – Yaakov Ellis StaffMod
    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 .