Page MenuHomePhabricator

Danglers in the username dropdown are cut off
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
Perryprog
Jan 2 2021, 8:49 PM
Referenced Files
F33993070: Screen Shot 2021-01-09 at 10.40.49 PM.png
Jan 10 2021, 3:51 AM
F33993072: Screen Shot 2021-01-09 at 10.42.36 PM.png
Jan 10 2021, 3:51 AM
F33993068: Screen Shot 2021-01-09 at 10.38.33 PM.png
Jan 10 2021, 3:51 AM
F33983139: image.png
Jan 2 2021, 8:49 PM
F33983141: image.png
Jan 2 2021, 8:49 PM
F33983137: image.png
Jan 2 2021, 8:49 PM
Subscribers

Description

For example:

image.png (218×1 px, 30 KB)

There are a few methods of solving this:

  • Replace the #personal h2 span height with line-height: normal; (what I currently pushed)
  • The overflow: hidden; on #user-tools h2 span (line 67) could have been removed
    • In addition to the above, the height: 18px; directly below could probably be removed as the dropdown arrow alignment could be better that way, but that might be a browser specific thing.
  • The #personal h2 span height could probably just be increased to 1.5em.

Here's what it looks fixed:

image.png (206×1 px, 28 KB)

And here's what it looks like without the overflow or 18px height on the #user-tools #personal h2:after:
image.png (194×1 px, 28 KB)

None of these seem to have any unintended side-effect, but there might be a reason (or a browser-specific thing) for some of those existing that I'm not aware of.

Event Timeline

Change 653548 had a related patch set uploaded (by Perryprog; owner: Perryprog):
[mediawiki/skins/Timeless@master] Replace manually set height for #personal username with default line height

https://gerrit.wikimedia.org/r/653548

So part of the issue here seems to be that the alignment is quite off in general - could you clarify what OS and browser you're using? I'm not seeing any clipping, and on mine, this just makes the alignment issues worse. Which likely means there's a font issue or something?

Mind you, clipping it off when the alignment gets off isn't exactly a good solution, so we might as well merge the associated patch, too, but I suspect there's more that needs resolving here...

I'm running macOS Big Sur, here's some more screenshots with rules.
Safari 14.0.2:

Screen Shot 2021-01-09 at 10.38.33 PM.png (232×1 px, 38 KB)

Safari Technology Preview 14.1:
Screen Shot 2021-01-09 at 10.42.36 PM.png (308×1 px, 52 KB)

Firefox 84:
Screen Shot 2021-01-09 at 10.40.49 PM.png (406×1 px, 88 KB)

I bet you're right on it being a font issue—I (surprisingly, for me) don't have Linux Libertine installed, so it's falling back to Times New Roman. I'll be able to confirm it tomorrow morning as it's late for me already.

Change 653548 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Replace manually set height for #personal username with default line height

https://gerrit.wikimedia.org/r/653548

Isarra claimed this task.

Looks resolved, patch went through, apparently forgot to close this. Please reopen if I'm wrong.