Page MenuHomePhabricator

In vector-2022 the main menu becomes full screen width under 1000px
Closed, DuplicatePublicBUG REPORT

Assigned To
Authored By
Xaosflux
Jul 22 2022, 6:37 PM
Referenced Files
Restricted File
Aug 1 2023, 1:25 AM
F37157731: Screen Shot 2023-07-31 at 20.42.31.png
Aug 1 2023, 1:07 AM
F37157729: Screen Shot 2023-07-31 at 20.42.20.png
Aug 1 2023, 1:07 AM
F36824685: Screen Shot 2023-02-13 at 22.37.28.png
Feb 14 2023, 3:40 AM
F36824686: Screen Shot 2023-02-13 at 22.37.17.png
Feb 14 2023, 3:40 AM
F36824690: Screen Shot 2023-02-13 at 22.36.56.png
Feb 14 2023, 3:40 AM
F36824689: Screen Shot 2023-02-13 at 22.36.49.png
Feb 14 2023, 3:40 AM
F35330400: image.png
Jul 22 2022, 6:37 PM

Description

NOTE: Can be resolved when T317899 is fixed and epic (T302073) resolved.

Steps to replicate the issue (include links if applicable):

What happens?:
The main menu becomes full-screen width and pushes all other content down

What should have happened instead?:
The main menu should collapse, just as the table of contents does.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

1000px

image.png (539×1 px, 52 KB)

at 999px the main menu becomes full width and stacks above the content:

image.png (394×1 px, 27 KB)

Event Timeline

Xaosflux renamed this task from In vector-2022 the sidebar becamse full screen width under 1000px to In vector-2022 the sidebar becomes full screen width under 1000px.Jul 22 2022, 6:38 PM

The mockups and notes in T307901 don't seem to say that a new sidebar behavior (stretch entire sidebar to full width) is expected?

Sorry, but closing this as "by design" is unacceptable if Vector-2022 is to become the default for new users. On Windows, docking to the left or right, so that the user can see two portrait windows side-by-side, was promoted as a common practice for those of us who suffered Windows 8, and I can't imagine I'm the only one who still has it as part of the normal workflow. Now, on most screens with an HD-like aspect ratio (somewhat old 1920x1080, or today's 2736x1824 at 175% OS scaling), docking to one side results in [https://1drv.ms/u/s!AtuCZY0YF4hGpK07b9IGdnUnGtV3_Q this] view of the main page. Is that the initial impression we want to give? I'm going to have to revert to Vector-2010 until this problem is addressed.

@DavidBrooks did you read the FAQ I linked to above ? It explains how the existing design is an interim solution.

@Jdlrobson My apologies; I had not realized the implication of the linked entry (in my defense, I was too much triggered by the word "expected", but that's my fault not yours). I'll get off my high horse and temporarily go back to classic Vector. Is there a task I can track that will tell me when the better solution is rolled out?

No problem! To be fair on you, my comment was briefer than it should have been. There's quite a few moving parts for this work, but currently subscribing to T302073 is the best way to keep track of where we are with the new pop out menu.

stjn reopened this task as Stalled.EditedSep 11 2022, 9:00 PM
stjn subscribed.

Going to re-mark this as Stalled so people would at least find this task if they look for it. More than fine if someone objects, but I think this is a valid task for a problem that DI team doesn’t have resources to solve right now.

That's fine. We can resolve/decline this when the new version of the main menu dropdown is in place.

alexhollender_WMF renamed this task from In vector-2022 the sidebar becomes full screen width under 1000px to In vector-2022 the main menu becomes full screen width under 1000px.Sep 15 2022, 9:09 PM
alexhollender_WMF updated the task description. (Show Details)
alexhollender_WMF updated the task description. (Show Details)

This is fixed for logged-in users but still broken for logged-out users. It is disorienting and pushes the whole page down roughly one screen-length.

We are completely the roll out of page tool to logged in users this week: https://phabricator.wikimedia.org/T328692. After that my understanding is we will gradually roll this feature out to anonymous users on non-English Wikipedia wikis. This however is dependent on talking to and identifying which communities are happy to trial the change. We don't tend to deploy to English Wikipedia for anonymous users for new features, due to the fact issues are more difficult to correct given the importance of page caching for anons.

Hi @Jdlrobson! I don't believe this is related to the roll-out of page tools.

Here is what it looks like to open the main menu (at just under 1000px, on FF/Mac):

  1. When logged in, working as expected:

Screen Shot 2023-02-13 at 22.36.49.png (1×1 px, 541 KB)
Screen Shot 2023-02-13 at 22.36.56.png (1×1 px, 602 KB)

  1. When logged out, this is a bug:

Screen Shot 2023-02-13 at 22.37.17.png (1×1 px, 1 MB)
Screen Shot 2023-02-13 at 22.37.28.png (1×1 px, 622 KB)

@Sj the dropdown behavior is tied to page tools which is currently only enabled for logged in users. You can force it on using https://en.wikipedia.org/w/index.php?title=Main_Page&vectorpagetools=1 in an incognito window to get a sneak preview of how that works.

Ah I see, thank you.

I think this particular regression is serious enough that at least the menu fix should be applied on all wikis.
The Main Menu has core links that every reader should have easy access to (help, RC, random, learning to edit, &c), it isn't reasonable to say "don't use the main menu until this is fixed"

Yeh it's not great :-( I think it's ready from a development point of view, but it's always favorable to roll out new features gradually (it's currently on Vietnamese Wikipedia - , and I believe the Vector RFC has delayed this.

This is still happening for a few pixels of width right around the scaled equivalent of 1000px, at some browser zoom levels (900px @ 90%, 1100 px @ 110%, 1250px @ 125%, &c. ... but not at 50% or 100%).

To experience this, just increase your browser zoom to 110% and size the browser to 1100px and shift it slightly back and forth. (you can also see the larger than usual flicker as you adjust window size across the transition, which is how I noticed this; pausing at the flicker leaves you in this state.)

It affects both the main menu and the tools menu, so if both are open, one appears above the page title and one appears just below it:

Screen Shot 2023-07-31 at 20.42.20.png (1×2 px, 738 KB)

Screen Shot 2023-07-31 at 20.42.31.png (1×2 px, 875 KB)

This happens both when logged in and when logged out. (FF and Chrome on MacOS).

@Jdlrobson should this be reopened or is this a separate issue?

Update: if I start with the menus closed and adjust the window width to this uncanny region, the CSS ends up in this weird state, with squashed topbar and no icon for the TOC:
{F37157748}

@stjn Can you replicate this in safe mode? I notice you have some rules here https://en.wikipedia.org/wiki/User:Sj/vector-2022.css which might be influencing this. I wasn't able to replicate the font-size / screen resolution combos that you shared.

I'm aware of T341580 which might be the issue you are seeing?

Thanks, that's the bug I was looking for. Yes, I can make it happen logged-out also, on a different browser.

(Not @Sj) In the future, please do not merge the tasks like that, as that subscribed me to something I do not really have any interest in :-)

Sorry about that @stjn but glad to hear from you. I will be more careful in future. :-)