Page MenuHomePhabricator

Enable sticky header at all screen-widths
Closed, DeclinedPublicFeature

Description

Feature summary (what you would like to be able to do and where):

In skins with a sticky header, specifically Vector 2022, I'd like the header to be on all pages, at all screen widths.
The toolbar could compress what icons appear at narrower sizes, but should always include search-icon / title / user-dropdown menu .

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):

Currently at medium and small screen widths, if the screen is narrow enough for the sidebars to be automatically hidden (at the point where about 40 characters of the title are visible in the sticky header), the sticky header also stops being shown when scrolling down a page.

I'd like to always have the context of the page title, and access to basic tools in the header (search, core dropdowns) without having to realize they're somewhere else on the page and navigating back there. I also want a consistent experience for myself or others I'm helping regardless of their [screen width + zoom size], a very tricky thing to even describe to someone else.

Benefits (why should this be implemented?):

  • Consistency: Maintains the same experience across browsers, devices, zoom levels, system font settings. Small changes of window size won't cause large changes in layout.
  • Muscle memory: I'd like the most basic features (search, core menus) to remain in roughly the same place on the screen.
  • Ease of use: one-click access to common functions

Event Timeline

KSarabia-WMF subscribed.

Thanks for the suggestion regarding the sticky header in Vector 2022.

However, this design request dates back quite a while, and our current design has been in place for over a year and a half. Given the extensive usage on the current design, we believe it has effectively met readers' needs. If you have any other suggestions or new ideas, please feel free to share them or open another ticket. Thanks again!

I see, alas! As with T364545 and T334941 I find V22 less polished at lower-width windows on desktop; I regularly use two-up windows on a laptop, so I run into them. Do you get feedback / polled data from readers with smaller windows?

It would be nice to have a place to gather FRs and issues for smaller windows, as individual phab tickets like this may not get traction (or discussion) until there is an articulated body of use cases that need them.

@Sj (Re: your comment in the mentioned task^) My user-CSS also does that! It even does it in mobile, and because I use it via Stylus, it also works in logged-out windows.
To use it yourself:

  1. Copy line 2 from https://meta.wikimedia.org/wiki/User:Quiddity_II/global.css (into your equivalent)
  2. and if you want it to work on your phone, also copy line 1 from https://meta.wikimedia.org/wiki/User:Quiddity_II/global.js (into your equivalent)
  3. Or if you want it in anon-windows and non-SUL wikis, install it via Stylus (instead of #1)

Demo of sticky header:

P.s. I also use tiled-windows on a laptop, a lot, often 4 at once, hence I've spent a lot of time on this!