Page MenuHomePhabricator

Set mobile breakpoint smaller for responsive MonoBook
Closed, ResolvedPublic

Description

One of the main complaints has been that responsive MonoBook has been showing up on desktop devices. The breakpoint is currently set at 850px, but people are reporting that due to smaller screens plus high zoom levels, responsive MonoBook is being triggered.

We can try using the more conservative @width-breakpoint-mobile: 320px; from variables.less in core instead.

Event Timeline

320px is too small - content width winds up half that due to the sidebar. 500 seems to be okay, though - content of ~300px still works mostly.

Still need to make tabs and p-personal collapsible and stuff for that, though, of course.

You can also consider to query on device-width (which should be zoom level proof right?). It's generally bad practice to do that, but here it might be worthwile. or combine both.

Even on desktop if it's this narrow it's generally preferable to collapse the navigation.

You can use 720px (although it can’t be used as max-width, 719?) from https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less. I would suggest that using variables already in use is probably wiser than coming up with your own.

The variables in place for other things are for other things - monobook needs its own because it has a specific layout that we need to take into consideration for this specifically (in particular the sidebar), so it's pretty much bound to have different cutoffs.

I mean, we got into this mess in the first place because I think I just reused the timeless ones, and even those haven't actually been nailed down yet (T165945).

I mean, breakpoints usually can be set not only for specific layouts, like Timeless I would guess have done, but for specific devices. WikimediaUI breakpoints are set for types of devices, so they can be reused with any specific layout without a problem. Most disagreement that people have found with the new layout is in that it changes into mobile layout too early, so it would make sense to use a mobile-only breakpoint for responsive layout developed by you even if columns are too narrow on 720px, too.

Right, the layouts should be tailored to the devices, or something. Put the two together and do what makes sense?

This is sort of the problem here - we don't want the mobile layout to show up on desktop devices unless they're narrow enough to kill the sidebar (since monobook starts getting mighty weird without it regardless of device), but we also want to have the mobile layout on mobile for the bigger buttons even if it is a big one? Maybe? But some people don't want it anywhere.

Change 437425 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/MonoBook@master] Set mobile width cutoff to 550px

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

Change 437425 merged by jenkins-bot:
[mediawiki/skins/MonoBook@master] Set mobile width cutoff to 550px

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

Change 437875 had a related patch set uploaded (by Legoktm; owner: Isarra):
[mediawiki/skins/MonoBook@wmf/1.32.0-wmf.7] Set mobile width cutoff to 550px

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

Change 437875 merged by jenkins-bot:
[mediawiki/skins/MonoBook@wmf/1.32.0-wmf.7] Set mobile width cutoff to 550px

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

Vvjjkkii renamed this task from Set mobile breakpoint smaller for responsive MonoBook to ysbaaaaaaa.Jul 1 2018, 1:06 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from ysbaaaaaaa to Set mobile breakpoint smaller for responsive MonoBook.Jul 2 2018, 1:20 AM
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.
Isarra claimed this task.