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.
- Change gradient height to match text height (using responsive "em"/"rem" units to stop the problem happening again).
Steps to reproduce:
- As a logged-in user, go to https://en.wikipedia.org/wiki/Roman_Empire
- Hover over Marc Anthony
- You will notice the "p" of the second to last line is cut off
- Go to https://en.wikipedia.beta.wmflabs.org/wiki/Colocolo 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" https://en.wikipedia.org/wiki/Colocolo where last letter of the word "they" is noticeably cut off