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:
| {F34112666} | {F34112668}
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.
| {F34112674}
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:
{F34112679}
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.