As a quick fly-by comment, at this point as a quick design direction I'd recommend, in decreasing priority order:

• merging the Notifications into the "👤" user menu (which is not great if they're trying to alert the user),
• move remaining items into a secondary, less-user-specific LHS toolbar menu control (perhaps something like "⋮" in contrast to the "☰" on the RHS and the existing user menu on the LHS), which feels like a bad design outcome, but less bad than multiple rows of header), and
• finally, as a last resort, merging the page view options into the user menu (which we want to be as visible as possible to readers).

But of course, I defer to the Web team, and designers in particular. :-)

I left some comments about narrow Vector stuff when Jon made his experimental responsiveVector2022 scripts that might be some other things to consider. (Some are now taken care of for other reasons I think.)

For the header, I think I've got it working well in my user-CSS customizations. I.e.

At sub-1000px it simply replaces the full "Logo+Wordmark+Substring" with just the "Logo".
[I've even managed to add an extra "Random article" die-icon button in there!]

At sub-720px it also replaces the Page-tool text-links with icons, enabling those to also stay visible all the way down to 450px.

It even works well in Mobile natively (except the minor logo-squashing). I've been using it on my phone for many months.

Overall: I LOVE having permanent, no-scroll single-click access to everything in this combined header - the search-bar, the Page-tools, and the Tools-menu (including all the power-tools I expect to find there) - no matter what configuration I'm using (window-sizes / window-tiling / logged-out (via Stylus CSS) / mobile / etc).
I really hope some of my User-CSS ideas can be incorporated into the official skin.

sharing a possible related issue: with the current styles, long-ish titles are squeezed in the header. is there an opportunity to revisit the font size on smaller viewports?

Quick clarification, I think these issues affect anyone who uses Vector-2022 in a narrower browser-window (as I often do, on a laptop screen, with tiled-windows). I.e. It's not just specific to Wikifunctions (except on mobile).

As an example, try slowly decreasing the width of a desktop browser-window with this featured article, and see how the site-header, page-tools, and title, have various whitespace or linewrap issues: https://fr.wikipedia.org/wiki/Liste_des_vainqueurs_du_stadion_aux_Jeux_olympiques_antiques

Plus additional visibility issue with the site-header for logged-in users, at certain widths:

And I believe my custom-tweaks noted above in T365631#9844628 might help resolve many of these aspects.

In T365631#10138803, @JScherer-WMF wrote:

Thanks @Quiddity and @AAlhazwani-WMF for the suggestions and notes here. Moving to groomed. Given that this primarily seems to impact Wikifunctions, @AAlhazwani-WMF how big of a negative impact on the experience would you say this is having right now? Just asking to help assign priority.

looking at the most recent stats[1] a third of wikifunctions visitors might be affected, ~4M pageviews/month (if we consider mobile web only, it might be a bigger number if we consider larger viewports too)

[1]: https://stats.wikimedia.org/#/wikifunctions.org/reading/total-page-views/normal%7Cbar%7C2-year%7Caccess~desktop*mobile-web%7Cmonthly

Quick clarification, I think these issues affect anyone who uses Vector-2022 in a narrower browser-window (as I often do, on a laptop screen, with tiled-windows). I.e. It's not just specific to Wikifunctions (except on mobile).

While this is true, less than 2% of users use Vector 2022 in a resized window under 720px which is why this has been historically been low priority. (T346979#9436616).

So I see the priority here as based on Wikifunctions needs which hits this problem for all mobile traffic.

> looking at the most recent stats[1] a third of wikifunctions visitors might be affected, ~4M pageviews/month (if we consider mobile web only, it might be a bigger number if we consider larger viewports too)

One important clarification: mobile web here means "mobile domain" not mobile resolution and mobile domain may include tablet users not impacted by this. We'd need to look more closely at device browser resolution.

In T365631#10142417, @Jdlrobson wrote:

One important clarification: mobile web here means "mobile domain" not mobile resolution and mobile domain may include tablet users not impacted by this. We'd need to look more closely at device browser resolution.

understood, thank you for the additional context @Jdlrobson!

Change #1152380 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] POC: stop collapsing items into more menu at lower resolutions

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

Change #1152381 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] POC/ WIP: Add missing icons to remaining menu items

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/252f952dfe/w/

Change #1152849 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Prepare for upstream icon change

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

Change #1152849 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Prepare for upstream icon change

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

Change #1152381 merged by jenkins-bot:

[mediawiki/core@master] Skins: Add missing icons to remaining menu items

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

Change #1152380 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] POC: stop collapsing items into more menu at lower resolutions

Reason:

To be continued...

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

It looks like the "eye" icon added in r1152381 doesn't actually work in Minerva, see T401530: "eye" icon used for link to Commons in File pages shows as an empty black square in Minerva.

On the eye issue, quoting from my comment on T401432: eye icon is not present on Minerva: Link to User Page on metawiki is a square on Minerva:

I think that an 'eye', line should be added somewhere in skin.json, but I'm not exactly sure where. Possibly on line 426, after 'edit', (at any rate, that is where the icon next to the "view on meta" icon is defined).

Change #1152380 restored by Jdlrobson:

[mediawiki/skins/Vector@master] POC: stop collapsing items into more menu at lower resolutions

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

I noticed that mw-body-header already has display: flex, so what is preventing us from setting flex-wrap to wrap under narrow screens?

It may also be necessary to set align-self: flex-start; margin-right: auto on the vector-toc-landmark class, otherwise it'll be placed on the right of the page.

Before:

After: