Page MenuHomePhabricator

Consider changing mobile site header height (and overlay header height) from 3.35em (53.6px) to 3em (48px)
Open, NormalPublic5 Story Points

Description

I would like to propose changing the mobile site header height (and overlay header height) from 3.35em (53.6px) to 3em (48px).

This would affect the main site header (with the logo and search box) and headers of all overlays (e.g. talk, editor, etc.).

Current height is larger than necessary to support mobile interaction, and instead (in case of fixed headers) takes too much screen space. Additionally, the weird fractional pixel height makes positioning stuff within headers with CSS awkward and can result in off-by-one-pixel positioning errors (e.g. due to different browsers rounding values differently, or dimensions defined with height+padding giving different results than position+top). I don't think the exact value 3.35em is intentional, but rather it seems to be a historical accident resulting from various refactorings over the years.

Proposed height 3em is currently used by the VisualEditor overlay on mobile for its header/toolbar. It is also a bit of a historical accident (OOUI toolbars are specified with height of 3em, but in the context of desktop Vector skin, that means 42px and not 48px). But since overriding this for mobile only is difficult (see discussion on T190596), it would be convenient if everything else was adjusted instead.

I'm proposing this now because new VE toolbar animations we plan to introduce per T210630 make the difference painfully obvious:

  • VE toolbar is smaller than the site navigation bar by a few pixels (and also than the wikitext toolbar). It looks weird when we slide it in (you can see a small piece of the grey site navigation below it). AFAIK the toolbar height was an intentional decision, but we might have to change it, since now with the animations it looks even weirder than before.

(Note that T209015 proposes making the VE toolbar even smaller, but I think it's more important to make all headers use the same height)

Event Timeline

matmarex created this task.Feb 6 2019, 3:40 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 6 2019, 3:40 PM

This turns out to be an easy change to make, so I prepared patches in advance, to make it easier to discuss. Screenshots for comparison:

OverlayBeforeAfter
(none)
Talk
Editor
VisualEditor

(note that VisualEditor overlay already uses 3em)

Change 488478 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/MinervaNeue@master] Change height of all page and overlay headers to 3em

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

Change 488479 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] Change height of all page and overlay headers to 3em

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

On skimming only, I agree with @matmarex proposal, we still meet our touch target requirements and unifying the headers is stronger than only reducing VE's toolbar (I started the other way round) as in T209015.
Seems good to go from my perspective!

Jdlrobson removed Jdlrobson as the assignee of this task.Feb 14 2019, 12:58 AM

@ovasileva: This is in Triaged but Future in our backlog but doesn't appear to have a priority.

@alexhollender please design review this when you have a change- it's live on https://reading-web-staging.wmflabs.org/wiki/Special:MobileOptions
I've given Bartosz permission to +2 once you've approved.

ovasileva triaged this task as Normal priority.Feb 15 2019, 8:12 AM
MBinder_WMF set the point value for this task to 5.Feb 20 2019, 6:18 PM

Risk of this change is high as it touches all pages. Right now our Overlay headers are tied to the header and I'm not confident changing the header height in one place would impact other headers. Changing the header height would also potentially mean changing the logo image in the header.

We're waiting on some design review from @alexhollender so we want to set the expectation that we need a bit more time on this change. Please ping if this is taking too long.

phuedx removed a subscriber: phuedx.Feb 25 2019, 1:27 PM

The most critical point here from my perspective is to make sure overlay height decrease (if we gonna go for a 48px based header) to normal branded header is well addressed.