Page MenuHomePhabricator

Inconsistent treatment for pinnable elements at the desktop breakpoint
Closed, ResolvedPublic



Pinnable elements (i.e. main menu and page tools) are supposed to collapse at the desktop breakpoint. They currently auto unpin at 1000px, while the rest of our CSS that relies on the desktop breakpoint updates at 999px. In order to avoid inconsistencies between 1001px, 1000px, and 999px viewports, we should ensure pinnable elements auto unpin at 999px, consistent with the @max-width-tablet CSS variable


  • pinnable elements unpin at 999px

Developer notes

Should be a 1 line change in pinnableElement.js. Will result in pixel progressions, previously the pinnable elements were hidden for desktop viewports, when it should only be hidden for tablet and under

Event Timeline

ovasileva triaged this task as Medium priority.Mar 6 2023, 10:29 PM
ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog board.

Change 897994 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Update how pinnable elements are handled with no-js and gradeC cases

Change 897994 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update how pinnable elements are handled with no-js and gradeC cases

There are still a lot of inconsistencies in the codebase, as the layout changes are defined sometimes before the breakpoint, sometimes after. Therefore, when the window width hits exactly the breakpoint we encounter a "mixed" state.

Just as an example, see mediawiki.special/contribute.less where there are both max-width: @width-breakpoint-tablet and min-width: @width-breakpoint-tablet.

I remember of a ticket talking more extensively about this issue I but didn't success to find it back…