Page MenuHomePhabricator

Page previews horizontal gradient overlaps previous line
Closed, ResolvedPublic2 Estimated Story Points


The horizontal gradient on page previews is taller than text height and overlaps with previous line:
Note how the bottom of the g is clipped.

Screen Shot 2017-05-20 at 3.52.20 PM.png (344×573 px, 233 KB)

Acceptance Criteria:

  • Change gradient height to match text height (using responsive "em"/"rem" units to stop the problem happening again).

Steps to reproduce:

  1. As a logged-in user, go to
  2. Hover over Marc Anthony
  3. You will notice the "p" of the second to last line is cut off

Screen Shot 2017-05-23 at 6.45.31 PM.png (349×564 px, 163 KB)

Testing criteria:

  1. Go to and hover over "Animalia" in the infobox

Expected behavior - preview should not blue any of the text in the right side of the line "Animals are motile, meaning they"
Compare to preview of "Animalia" where last letter of the word "they" is noticeably cut off

Event Timeline

ovasileva moved this task from Incoming to Upcoming on the Readers-Web-Backlog board.
ovasileva set the point value for this task to 2.

More important details from MediaWiki original issue report:
I recently spotted a visual problem with the horizontal gradient (which is used to show the article content continues) at the end of the article description text: its large height causes it to cover part of the previous line.

After checking the HTML code, I found the problem. The text line height is set to 20px and the gradient pseudo-element has the height 24px. The pseudo-element should be the height of a line of text (20px here). To prevent the issue happening again if the text font size changes, the height should be set to "1em".

Please fix this minor issue - an image showing my screenshots of the problem [shown below] is available at "Problem demo image shown below" and any article with a tall letter such as "g" on the end of the second last line of the Page Previews/Hovercards text should cause this problem.

v3Tf8z[1].jpg (574×1 px, 357 KB)

Edwardj_123 renamed this task from Page previews horizontal gradient overlaps text to Page previews horizontal gradient overlaps previous line.May 25 2017, 7:27 PM
Edwardj_123 updated the task description. (Show Details)

Using rems is pretty safe given popups is JS only (ie10+) and it is supported in ie9+ (when not used in font, use it in font-size instead).

Change 356464 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/Popups@master] Reduce height of horizontal gradient

Change 356464 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Reduce height of horizontal gradient

bmansurov added a subscriber: bmansurov.

@ABorbaWMF: @bmansurov's change should've been deployed to the Beta Cluster. You'll need to find some articles with long previews so you see spot the gradient.

@ABorbaWMF - adding test articles to task description

Looks good on Beta. Tried the example article. Also, the 'fox' link on the Dog article works well.

image.png (768×1 px, 340 KB)

image.png (768×1 px, 540 KB)

looks good. side note: good example of inappropriate bolding on the fox article