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:

Related task: https://phabricator.wikimedia.org/T420724 (files for abstract wikipedia)

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
https://78d9e52982.catalyst.wmcloud.org/w/

In T365631#11862971, @PatchDemoBot wrote:

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
https://78d9e52982.catalyst.wmcloud.org/w/

If this is the tentative new mobile-responsive Vector 2022, then sorry to say that it looks quite similar to Minerva skin to me, which is bad to be honest. The design of menu as shown by image below limits the functionality of the existing portlets (p-navigation and p-interaction), which means any gadgets or userscripts that would like to add functional links to these two portlets would need to try modify the mobile responsive view just like how it has been for the existing Minerva skin (or MobileFrontend). This is just overcomplicating what shouldn't be complicated in the first place.

I prefer that the mobile-responsive Vector 2022 not sacrifice any functionality from the desktop web version and focus only on improvements to the header (as shown in the orange circle).

Perhaps for the mobile-responsive version, the "Alerts" and "Notices" related functionalities can be merged into one, the watchlist button moved to the personal menu, the clock (and watchlist) moved to the personal menu, and instead of using wordmark just use the "logo icon" so that the search bar can be used normally? Looks like something as below:

The prototype JS code that I made for the mobile responsive vector 2022 (tested for screen resolution 300-500 px): https://meta.wikimedia.org/wiki/User:Hakimi97/responsiveVector2022.js

Again, ignore the grey background which was introduced through CSS styling, refer to the page: https://www.mediawiki.org/wiki/User:Hakimi97/grey-Vector-2022.css

Actually, the clock used to be in the personal menu. I argued multiple times on https://www.mediawiki.org/wiki/MediaWiki_talk:Gadget-UTCLiveClock.js that it should remain there, but others had other opinions. If there’s still no willing to revert this decision, it should also be possible to add the clock at both places and hide unnecessary ones (based on screen size) using CSS. (Even earlier, the watchlist button also used to be in the menu, but I guess people were dissatisfied with it being one more click away, so Vector 2022, which started as a cleaner skin than Vector 2010, has slowly become IMO just as bloated as its predecessor.)

In T365631#11950617, @Tacsipacsi wrote:

Actually, the clock used to be in the personal menu. I argued multiple times on https://www.mediawiki.org/wiki/MediaWiki_talk:Gadget-UTCLiveClock.js that it should remain there, but others had other opinions. If there’s still no willing to revert this decision, it should also be possible to add the clock at both places and hide unnecessary ones (based on screen size) using CSS. (Even earlier, the watchlist button also used to be in the menu, but I guess people were dissatisfied with it being one more click away, so Vector 2022, which started as a cleaner skin than Vector 2010, has slowly become IMO just as bloated as its predecessor.)

The best outcome for the Vector-2022 mobile web responsive page view is for the header to be minimalized while not sacrificing any functionalities. Although it is impossible to replicate the exact same behaviour of the desktop page view on the mobile page view (for example, the watchlist/reading list icon and the clock being visible directly in the header), we can still ensure all necessary functionalities are preserved with minimal adjustment.

I have updated the prototype JS code, aiming for the mobile responsive vector 2022 (tested for screen resolution width 300-500 px): https://meta.wikimedia.org/wiki/User:Hakimi97/responsiveVector2022.js

Below is the video of the responsive header tested across screen widths of 300 px to 500 px. I have adjusted some CSS styling to make it work.

And below is the video showing that the responsive Vector 2022 header is possible, except for the "p-vector-user-menu-overflow" being moved to the position within the p-personal.

Change #1152380 abandoned by Jdlrobson:

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

Reason:

This was a proof of concept (POC)

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

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org//wikis/252f952dfe/w/

Test wiki on Patch demo by Jon (WMF) using patch(es) linked to this task was deleted:

https://78d9e52982.catalyst.wmcloud.org/w/