Page MenuHomePhabricator

Avoid gradient fading on Page Previews, if there is only one line of text in the text summary
Closed, ResolvedPublic1 Estimated Story Points



Page previews apply gradient fading to text summary even if the summary is one single line.


if the text summary is one single line, it means the sentence ends there. there sholdn't be any fading needed

CSS fix

  • Apply min-height to page previews.
  • min height should be 40px
.mwe-popups.mwe-popups-is-not-tall .mwe-popups-extract {

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 1 2018, 1:35 AM
Nirzar renamed this task from Avoid gradient fading if there is only one line of text in the text summary to Avoid gradient fading on Page Previews, if there is only one line of text in the text summary.Mar 1 2018, 1:37 AM
Dvorapa added a subscriber: Dvorapa.Mar 1 2018, 7:15 AM
Vachovec1 updated the task description. (Show Details)Mar 1 2018, 10:37 AM
ovasileva triaged this task as Medium priority.Mar 1 2018, 11:23 AM

Please add a comment on that CSS rule about why there is a min-height.

min height here refers to the text area

ovasileva set the point value for this task to 1.Mar 6 2018, 5:17 PM

min-height prevents the gradient to be applied to first line, it starts with second line given our line height

Jdlrobson claimed this task.Mar 9 2018, 5:00 PM

Change 417985 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Popups@master] Give summary a min-height to avoid overlap with gradient.

Change 417985 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Give summary a min-height to avoid overlap with gradient.

ovasileva reassigned this task from Jdlrobson to ABorbaWMF.Mar 14 2018, 3:10 PM

Moving this to QA to test edge cases. @Jdlrobson - where can we test?
(All merged changes automatically go to the beta cluster within 10 minutes). If you need staging let me know as I'll need to manually set that up.

Looks good on beta!

I'm having a little trouble finding a preview that looks like the one in the original description. @Nirzar, what links are you hovering on and on what page? I tried the page in @Jdlrobson comment but I could not find a link to hover on that produced a similar preview.

I am also seeing this but not sure if it is related:
This one used to produce a preview

Template info appears in preview



I was able to find this one on, which looks ok

@ABorbaWMF : Ouch. The previews in your examples are seriously broken. I hope this is not coming into production.

@Vachovec1 @ABorbaWMF this is the beta cluster. As can be seen the pages themselves are broken which is why their previews are broken -
The beta cluster is not a good place to test summaries :)

10.1093/acprof:oso/9780195314250.003.0001 < this link has a preview that ends in one line at the edge. it doesn't fade into the gradient.

@Nirzar and @Jdlrobson, thanks for the link. I tried that one yesterday but figured it was a hair too short for the gradient to kick in. On my side, I am not seeing the gradient at all on that link. I purged the cache on the page. Let me know if I am missing something.

You should't be seeing gradient on it. since the sentence or text ends where it ends. if it wraps to second line. it will start showing the gradient. that is intended.

Got it, sorry for the confusion. Looks good to me.

Jdlrobson reassigned this task from ABorbaWMF to Nirzar.Mar 21 2018, 5:16 PM
Jdlrobson added a subscriber: ABorbaWMF.
Nirzar closed this task as Resolved.Mar 22 2018, 9:29 PM


Fixed on production now.

Macro votecat: looks good