Page MenuHomePhabricator

Italicized titles can get clipped on mobile
Closed, ResolvedPublic2 Story Points

Description

The title can get clipped if it extends beyond the box for the heading-holder. See the edge of the 'J' in the screenshot:

This is caused by:
heading-holder { overflow: hidden; }

=== Replication steps
Visit https://en.m.wikipedia.org/wiki/Jane_and_the_Dragon with Chrome. Note J is clipped.

==== Developer notes
The affecting style is located in `skins.minerva.base.styles` module. 
The problem is that the title is italicized. The following CSS will make it go away:

h1 i {

padding-left: 1px;

}

Alternatively, we can remove the overflow:hdidden on heading-holder

Event Timeline

kaldari created this task.May 11 2018, 9:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 11 2018, 9:37 PM
pmiazga updated the task description. (Show Details)
pmiazga added a subscriber: pmiazga.

@kaldari - could you share the device/os/browser that you are using? I tried some titles on my machine and it works well (Debian + Chrome 66)

Jdlrobson added a subscriber: Jdlrobson.

Can reproduce on https://en.m.wikipedia.org/wiki/Jane_and_the_Dragon (OSX Chrome). The italic tag is the problem.

Jdlrobson renamed this task from Title can get clipped on mobile to Italicized titles can get clipped on mobile.May 29 2018, 4:09 PM
pmiazga set the point value for this task to 2.May 29 2018, 4:30 PM

We'll need to do some code archeology to determine whether the overflow hidden can be removed but there's two easy fixes here.

I think this problem is affecting non-italicized titles containing the letter J as well. I'm seeing the following on both Chrome and Safari on https://en.m.wikipedia.org/wiki/Jailhouse_Rock:

currentwidth 2px padding-left on h1
ovasileva triaged this task as Normal priority.May 30 2018, 2:21 PM
Niedzielski moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.
Niedzielski removed Niedzielski as the assignee of this task.Jun 13 2018, 2:31 PM
Niedzielski added a subscriber: Niedzielski.
Jdlrobson moved this task from Backlog to Bugs on the MinervaNeue board.Jun 13 2018, 3:55 PM

Is there a patch? I don't see one...

Change 440182 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/MinervaNeue@master] Fix: don't truncate the article title

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

Is that all you care about? Patches?

Change 440182 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Fix: don't truncate the article title

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

Live on both staging and the beta cluster. I've created https://en.m.wikipedia.beta.wmflabs.org/wiki/Italic_title to aid testing.

Vvjjkkii renamed this task from Italicized titles can get clipped on mobile to b3caaaaaaa.Jul 1 2018, 1:10 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii raised the priority of this task from Normal to High.
Vvjjkkii removed ovasileva as the assignee of this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed the point value for this task.
Vvjjkkii edited subscribers, added: ovasileva; removed: gerritbot, Aklapper.
TerraCodes renamed this task from b3caaaaaaa to Italicized titles can get clipped on mobile.Jul 1 2018, 2:38 AM
TerraCodes closed this task as Resolved.
TerraCodes lowered the priority of this task from High to Normal.
TerraCodes assigned this task to ovasileva.
TerraCodes updated the task description. (Show Details)
TerraCodes set the point value for this task to 2.
TerraCodes edited subscribers, added: Aklapper, gerritbot; removed: ovasileva.