Page MenuHomePhabricator

Page previews: Last line is cropped at the bottom
Closed, ResolvedPublic5 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
The letters of the last line ("użytkownikowi odwiedzającemu") are cropped at the bottom ("y", "ą", "j" do not display parts that lie below the baseline). This is caused by the style "height: 176px" whereas 9 lines of text with "line-height: 20px" need 180px to display properly.

What should have happened instead?:
The last line should be visible in the full height.

Software version (skip for WMF-hosted wikis like Wikipedia): plwiki

Other information (browser name/version, screenshots, etc.):

image.png (391×756 px, 179 KB)

QA Results - Beta

ACStatusDetails
1T330570#9153926

QA Results - Prod

ACStatusDetails
1T330570#9167589

Related Objects

Event Timeline

ovasileva triaged this task as Medium priority.Mar 1 2023, 10:53 PM
ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog board.
ovasileva raised the priority of this task from Medium to High.Apr 27 2023, 5:36 PM
LGoto set the point value for this task to 5.Apr 27 2023, 5:41 PM

The storybook should help here https://doc.wikimedia.org/Popups/master/js/ui/?path=/story/text--short-long does have some debugging tools around expected height. It seems like at some point previews got bigger than they should have. They are 210px high rather than below 200px.

Jdlrobson lowered the priority of this task from High to Medium.May 25 2023, 6:53 PM
ovasileva raised the priority of this task from Medium to High.Aug 17 2023, 5:19 PM

Although this issue might affect latin scripts by clipping off some descenders or diacritics, it's much more pronounced in some south asian scripts such as Urdu where it almost clips the entire last line.

Screenshot 2023-08-28 at 4.58.56 PM.png (622×966 px, 332 KB)

bwang removed bwang as the assignee of this task.Aug 31 2023, 7:30 PM
bwang subscribed.

Change 954140 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/Popups@master] Prevent popups text from being cut off and make bottom spacing for vertical page previews consistent

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

Change 954313 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/Popups@master] Simplify pointer spacing CSS and clean up CSS

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

Change 954140 merged by jenkins-bot:

[mediawiki/extensions/Popups@master] Prevent popups text from being cut off and make bottom spacing for vertical page previews consistent

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

Change 954313 merged by jenkins-bot:

[mediawiki/extensions/Popups@master] Simplify pointer spacing CSS and clean up CSS

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

Edtadros removed Edtadros as the assignee of this task.EditedSep 9 2023, 12:55 AM
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to https://pl.wikipedia.org/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna (if testing prod)
Hover on the Wikipedia link (in the "Witaj w Wikipedii" header)
See the last line of text
✅ AC1: Decenders should not be truncated.

screenshot 27.png (691×1 px, 362 KB)

screenshot 26.png (921×1 px, 351 KB)

I couldn't find any south asian text in beta, I took a chance at setting the uselang variable but that doesn't affect the popup.

LGTM checks all passes I will move it to QA Prod

Test Result - Prod

Status: ❌ FAIL
Environment: plwiki, urwiki
OS: macOS Ventura
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to https://pl.wikipedia.org/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna (if testing prod)
Hover on the Wikipedia link (in the "Witaj w Wikipedii" header)
See the last line of text
❌ AC1: Decenders should not be truncated.
plwiki looks good

screenshot 35.png (816×1 px, 442 KB)

Trying Jan's recommendation of Urdu we see that the text decenders are truncated. And in addition, the search field has a regresssion.

screenshot 36.png (887×1 px, 335 KB)

Per discussion in standup we confirmed this due to the fact that Urdu Wikipedia changes the default font size.