Page MenuHomePhabricator

Vector menu items no longer align logically (+ overlapping sidebar/logo)
Closed, ResolvedPublic3 Estimated Story Points

Description

The menu seems to be off-set strangely to the left, causing the heading and its contents to no longer be aligned.

compare e.g. the sidebar, where things are neat and tidy, as well as pretty much every other platform and application I could find at hand where menus come from a tab, button, icon, or mouse click:

cap-side.png (498×434 px, 51 KB)
cap-mac.png (573×464 px, 365 KB)

And compare to the now-misaligined nav menus. Given this is an LTR layout, the right-edge has natural visual alignment sincee there's no text there. It feels as through the items are appearing under another menu.

cap2.png (417×943 px, 61 KB)

It seems like this is fallout from T267325 where in the new Vector prototype, the search field has been removed from the tab bar and so there's greater chances of menus going off-screen when they start so close to the edge of the screen. However the current solution feels a bit clunky and improvised.

For one, if the menu goes off-screen then that's a bug in the logic deciding on the width of the menu. It should never be wider than the viewport of course. Once that's fixed the next issue might be that it'll be very narrow if it starts close to the edge of the screen, which could be solved with a minimum width of sorts and perhaps a debounce from the edge where it prefers "left"-aligned until it can't go further.

This seems to be how e.g. macOS, OOUI/VisualEditor, Bootstrap, and others function. They either never place regular menus so close to the edge, or have non-textual menus to take up the first few positions, or if they have to have a menu there, then it reacts to the edge of the screen accordingly and mimises its width.

Additional fall out from this change is also seen on the other side of the screen, where menus such as for language conversions (or in the below example, a gadget, but it happens with official core/extension features as well), where this menus now cut into the sidebar and into the logo in way that seems pretty unnatural.

For example, the menu has no top edge. It doesn't because this menu was designed from the ground up with the kind of orientation in mind that it had until yesterday. When it floats the other way, it lacks visual cohesion and no longer has an edge to contain itself or to transition otherwise more naturally between it and its background:

cap.png (1×1 px, 358 KB)

Relation between tab and menus is lost (white edging on white, it now extends the "Special page" tab, for example, rather than the menu only). And top edge/containment is lacking etc.

Also, separate from T267325, it seems this is just as much an LTR issue as it is an RTL issue. While it may have been somewhat fixed for RTL in the worse case, there is nothing stopping the menus now going off-screen for LTR on enwiki instead.

Acceptance Criteria

  • In legacy Vector, all dropdown menus should be aligned with left edge of their associated dropdown button (for RTL languages, menus should be aligned with the right edge) as in the first picture above. This includes the "more menu", language variants menu, or any other menus found in the tabs above the content.
  • In modern Vector, the "more" menu (or any other menus found in that group of tabs), should be right-aligned. All other menus should be left aligned.

QA Results - Beta

ACStatusDetails
1T275158#7038174
2T275158#7038174

QA Results -Prod

ACStatusDetails
1T275158#7088453 There is an unrelated regression in this AC.
2T275158#7088453

Event Timeline

While it may have been somewhat fixed for RTL in the worse case, there is nothing stopping the menus now going off-screen for LTR on enwiki instead.

Case in point:

Screenshot 2021-02-18 at 20.48.12.png (758×1 px, 494 KB)
Screenshot 2021-02-18 at 20.39.33.png (1×1 px, 394 KB)
Screenshot 2021-02-18 at 20.41.19.png (700×902 px, 112 KB)
zhwiki lang menucontent reviewread article

What gadgets are you using there @Krinkle and how do we install them ?
Would help with understanding what's going on here.

I agree that this issue could use some more consideration.

As mentioned in the description, the change was made to accommodate the absence of a search box near the "more" tab in new Vector, which places that tab at the very edge of the content container.

I don't think we considered what happens when there is a dropdown at the other edge of the page, as visible with the languages variants.

Thinking in terms of a solution to this issue, I'm not sure that it has to involve modifying the actual width of the menu or changing it's position when it runs out of room and hits the edge of the screen.

We could for example, decide whether the menu should be right or left aligned while it is being opened, based on whether or not it intersects the content container.

Heck, we could even make this very simplistic and just make all the dropdowns inside of <div id="left-navigation"> open left aligned, and the ones in <div id="right-navigation"> open right-aligned. That would point them all "inwards" towards the content, and wouldn't involve tracking their width or adding media queries.

And even though right-aligned menus are uncommon, they do appear when necessary:

Screen Shot 2021-02-18 at 10.50.05 PM.png (318×668 px, 238 KB)

I also think part of what makes the menus look weird with the right alignment is that they maintain the underline under the tab which also makes it hard to tell which tab they belong too. I think just removing that underline may help reduce some of that visual confusion (though I'm not sure if that's in scope for this task specifically).

Screen Shot 2021-02-18 at 10.59.39 PM.png (512×440 px, 86 KB)
Screen Shot 2021-02-18 at 10.59.39 PM copy.png (512×440 px, 82 KB)

It's worked this way for ten years and has now broken today's Vector skin (where the RTL issue that justified this for new Vector doesn't exist). Can we unbreak this first please?

We could keep it this new way for New Vector, since indeed it does seem to be helpful there, at least until the "Future" arrives to make it work even beter (for both RTL and LTR).

Otherwise these repeated breakages kind of defeat the purpose of having new Vector be a separate opt-in version if it still breaks core workflows and gadgets in ever shifting directions and uncertainty. Either we need to priotitise this now and actually solve this problem thoroughly, or revert it and postpone solving it when it suits you (possibly leaving new Vector in the new compromised form if its considered better during the iteration phase to learn from that a bit more in the interim).

ovasileva triaged this task as Medium priority.Feb 24 2021, 3:11 PM

Since we'll be spending more attention to this area of the page later on in the project, I think we should only consider a quick fix for the time being. @Jdrewniak - I think the line removal you suggested in T275158#6842244 would be appropriate here. Moving to needs analysis for analyzing this fix only.

Change 674615 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang

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

cjming added a subscriber: cjming.

assigning back to @Jdrewniak to resolve merge conflict in patch

Change 674615 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang

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

Edtadros added a subscriber: Edtadros.

@Jdlrobson I'm not sure what the acceptance criteria is here. Here is what I see:

Beta - Legacy Vector

Screen Shot 2021-04-22 at 8.39.29 AM.png (200×201 px, 17 KB)

Beta - New Vector
Screen Shot 2021-04-22 at 8.37.20 AM.png (244×290 px, 20 KB)

Prod - Legacy Vector
Screen Shot 2021-04-22 at 8.38.55 AM.png (180×278 px, 25 KB)

Can you clarify the QA steps please? Thanks!

I updated the description. Hope that helps. @Edtadros from the last screenshot you posted

Prod - Legacy Vector

Screen Shot 2021-04-22 at 8.38.55 AM.png (180×278 px, 25 KB)

that looks to be incorrect :/ The menu should go underneath the search bar in legacy Vector.

From checking Special:Version, I see production is on Vector commit 50dcf4f April 13, 2021, but the patch with the fix, 5820fa0 landed April 21, 2021, so it's not in prod yet...

Test Result - Beta

Status: ✅ PASS
Environment: beta/xyzwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: In legacy Vector, all dropdown menus should be aligned with left edge of their associated dropdown button (for RTL languages, menus should be aligned with the right edge) as in the first picture above. This includes the "more menu", language variants menu, or any other menus found in the tabs above the content.

LTRRTL
Screen Shot 2021-04-27 at 6.09.00 AM.png (878×721 px, 325 KB)
Screen Shot 2021-04-27 at 6.10.48 AM.png (912×720 px, 323 KB)

✅ AC2: In modern Vector, the "more" menu (or any other menus found in that group of tabs), should be right-aligned. All other menus should be left-aligned.

LTRRTL
Screen Shot 2021-04-27 at 6.08.21 AM.png (797×720 px, 256 KB)
Screen Shot 2021-04-27 at 6.11.17 AM.png (792×719 px, 241 KB)

Test Result - Prod

Status:
Environment: enwiki, hewiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: In legacy Vector, all dropdown menus should be aligned with left edge of their associated dropdown button (for RTL languages, menus should be aligned with the right edge) as in the first picture above. This includes the "more menu", language variants menu, or any other menus found in the tabs above the content.

LTRRTL
Screen Shot 2021-05-14 at 8.22.43 AM.png (229×653 px, 73 KB)
Screen Shot 2021-05-14 at 8.29.31 AM.png (241×645 px, 73 KB)

@ovasileva This passes as far as the menu alignment, but it looks like the user menu and the search field overlap.

❓ AC2: In modern Vector, the "more" menu (or any other menus found in that group of tabs), should be right-aligned. All other menus should be left-aligned.

LTRRTL

@Jdrewniak, in prod I can't seem to find any pages that would result in a drop-down menu. When I narrow the page to get the "more" menu, it will stop narrowing at a certain point before a more drop-down appears. If there isn't a situation where I will see one in new Vector then we can ignore this AC.

@Edtadros The only situation that I know that isn't a gadget that results in a dropdown menu on the right-hand side of the page is the language variants menu. I just checked this myself on Kurdish wiki and I think it's looking fine :)
Moving to ready for sign off.

Screen Shot 2021-05-24 at 2.17.24 PM.png (666×1 px, 288 KB)
Screen Shot 2021-05-24 at 2.16.48 PM.png (702×944 px, 259 KB)
Screen Shot 2021-05-24 at 2.16.40 PM.png (624×948 px, 186 KB)
legacy vectormodern vector "more menu"modern vector "language variants" menu

Resolving - looks good