Page MenuHomePhabricator

[Research 4hrs] [Bug] Page issues link overlapping in multiple languages for larger screens
Closed, ResolvedPublic0 Story Points

Description

Steps to Reproduce

  1. Go to https://ru.m.wikipedia.org/wiki/%D0%9B%D0%B0%D0%B2%D1%80%D0%BE%D0%B2%D1%81%D0%BA%D0%B8%D0%B9,_%D0%9D%D0%B8%D0%BA%D0%BE%D0%BB%D0%B0%D0%B9_%D0%90%D0%BB%D0%B5%D0%BA%D1%81%D0%B5%D0%B5%D0%B2%D0%B8%D1%87?minerva-issues=b

Expected Results

  • Text does not overlap

Actual Results

  • Text overlaps

  • Seems there is an issue with the fadeout

Also noticed on:

  • cawiki, fawiki, bjnwiki, a couple of others I don't have links for

Environments Observed

Production

Testing Environment for QA

Browser Version

  • Chrome 69.03

OS Version

  • OS X 10.11.6

Spike questions to answer

  • Why does the text overlap?
  • What are the possible fixes?
  • How would those possible fixes apply across all the wikis?

Event Timeline

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptOct 12 2018, 10:01 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Doesn't occur when I shrink the screen:

ovasileva renamed this task from [Bug] Page issues link overlapping in multiple languages for larger screens to [Research 4hrs] [Bug] Page issues link overlapping in multiple languages for larger screens.Oct 16 2018, 4:22 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson set the point value for this task to 0.
ovasileva updated the task description. (Show Details)Oct 16 2018, 4:28 PM
Jdlrobson added a subscriber: Jdlrobson.

Do we have any other uris for this bug? The one in the description was fixed.

Change 473145 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Avoid overlapping text on Russian and Farsi projects

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

Why does the text overlap?

English wikipedia uses a class called mbox-text-span (confusingly on a div element not a span) that we style with Minerva specific rules. Russian doesn't use this class - it uses mbox-text-div which is more semantically correct.
Persian does use mbox-text-span but it uses a span tag rather than a div.

The style Minerva ships looks like this:

.client-js .ambox .mbox-text-span {
    max-height: 3.3em;
    height: 3.3em;
    overflow: hidden;
}

The element needs to be display: inline-block;

What are the possible fixes?
How would those possible fixes apply across all the wikis?

It doesn't make sense to tell wikis to fix this themselves by adding using a class mbox-text-span on an element that's not a span (Russian) or changing a span element with mbox-text-span to a div (Persian).

Option 1:
We add more hacks to our css file to accommodate other selectors with this case and so that it works for inline elements we add display: inline-block; :
e.g.

.client-js .ambox .mbox-text-div,
.client-js .ambox .mbox-text-span { display: inline-block; .... }

This would work cross-wiki providing these classes are being used everywhere (which we can't say for such)
However we do so at incurring even more CSS that is useless for wikis that don't do this.

Option 2
For each wiki we encourage them to use TemplateStyles and copy across the styles.

If we take this approach, I'd like us to move all page issues styles into https://en.wikipedia.org/wiki/Template:Ambox/styles.css for English Wikipedia, first. We would then point editors to this file as something they need to copy and include themselves.

Conclusions

Option 2 is the obvious long term solution here, but that can be said for ALL our CSS. I suggest we add the rule to Minerva via https://gerrit.wikimedia.org/r/473145 and handle option 2 separately when we have more bandwidth.

ovasileva reassigned this task from Jdlrobson to nray.Nov 14 2018, 6:21 PM
nray removed nray as the assignee of this task.Nov 16 2018, 12:04 AM
nray added a subscriber: nray.

Change 473145 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Avoid overlapping text on Russian and Farsi projects

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

ovasileva added a project: Product-QA.

@ovasileva This one is still occurring for me on production. Is that the right environment to test? Also, I am seeing a page issue mid-page on the Russian article. Not sure if that's supposed to be there.

@ABorbaWMF - this should now be on production. Could you take a look again?

phuedx added a subscriber: phuedx.Dec 4 2018, 6:12 PM

@ABorbaWMF said that he'll be working on this task this week.

@ovasileva This one is looking good. I was able to go through the links listed here and on T204090. I was able to find some overlap issue on articles with more than 2 issues. These are very rare.


https://ru.m.wikipedia.org/wiki/Гражданская_оборона?minerva-issues=b

Other articles are looking ok

This is not on production (Russian) yet per T206887#4752656. but only went out on 6th Dec Thursday. Can you take another look now?

Niedzielski added a subscriber: ABorbaWMF.

This appears to still be an issue for large screens:


Anon, small screen, no issue.


Anon, large screen, issue.


Logged in, large screen, issue.

Good QA.. I see the problem:
.client-js .ambox .mbox-text-span

Change 479520 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Tablet style should apply to mbox-text-div as well as mbox-text-span

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

Change 479520 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Tablet style should apply to mbox-text-div as well as mbox-text-span

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

Jdlrobson assigned this task to ovasileva.EditedDec 17 2018, 10:14 PM

Hey Olga since you are QAing page issues anyway could you QA and sign this off as well?

Note, the change is not live on Russian yet (but will be Thursday 20th if all goes to plan)