Page MenuHomePhabricator

Highlight does not cover the menu option entirely in the toolbar on Mobile VE
Closed, ResolvedPublic

Description

Highlight does not cover the menu option entirely in the toolbar on Mobile VE

Production:

Screen Shot 2018-03-23 at 4.23.21 PM.png (109×1 px, 25 KB)

Beta:

Screen Shot 2018-03-23 at 4.23.27 PM.png (111×1 px, 24 KB)

Event Timeline

Looks like we need to tweak the height of the toolbar to match the new font size.

Thanks @Ryasmeen for looking into all the VE Mobile issues, I've been fiddling around yesterday and provided a first fix to MobileFrontend. More to come…

@Volker_E I'm not sure what to do with this task. Should it be merged into something else, if you're writing a patch that fixes those issues too?

okay looks like this is still not completely fixed. I see, it's fixed for the first menu option Text formatting but not for the other ones? Has there actually been any fix for this ?

Screenshots:
Text formatting highlight

Screen Shot 2018-04-05 at 4.08.26 PM.png (527×1 px, 72 KB)

Link
Screen Shot 2018-04-05 at 4.08.33 PM.png (533×1 px, 77 KB)

@Ryasmeen thanks for the updated screens.
@Deskana Sorry for the delay, no let's keep it in this task. That's a OOUI in mobile VE specific issue. Ed was fixing some of those and I then cared for other affected products. Will provide a patch.

Change 435827 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/VisualEditor@master] Make VE mobile tools use full height

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

That's a VE mobile specific issue.
My patches result in

image.png (142×2 px, 10 KB)

Change 450580 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/skins/MinervaNeue@master] Slightly reduce toolbar height when using VE

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

Change 452598 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] ve.init.mw.MobileArticleTarget: Tweak toolbar items' height

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

Change 435827 abandoned by Bartosz Dziewoński:
Make VE mobile tools use full height

Reason:
I guess we're going with Ed's approach.

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

We're solving this by overriding the height of mobile editor's toolbar from 3.35em to 3em only when using VisualEditor. The existing VisualEditor styles are written to use a 3em toolbar (same on desktop and mobile) and overriding everything to use 3.35em would require a lot of fragile code (and where does 3.35em come from, anyway?).

On Minerva, which uses a 16px base font size, 3.35em = 53.6px, 3em = 48px, which is still larger than the 44px minimum size I've seen recommended for mobile buttons. (On Vector, which uses a 14px base font size, 3em = 42px.)

Change 452598 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] ve.init.mw.MobileArticleTarget: Tweak toolbar items' height

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

Change 450580 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Slightly reduce toolbar height when using VE

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

Deskana assigned this task to matmarex.
Deskana triaged this task as Medium priority.
Volker_E raised the priority of this task from Medium to Needs Triage.Nov 27 2018, 4:34 AM
Volker_E removed a project: Patch-For-Review.
Volker_E moved this task from Backlog to Done on the UI-Standardization-Kanban board.