The legacy Vector skin contains several lines of JS that collapses menu items under the more menu at low resolutions. The Vector skin however is not a responsive skin and it's questionable to how much this improves the experience:
If anything it gives the illusion of responsive support and makes the product look half baked and unfinished.
The code has one longstanding bug (T71729), creates complexity in the code (Vector is tied to a collapsible and emptyPortlet class and must keep track of gadgets using addPortletLink) and enforces constraints to modernizing the new Vector on the classes that it needs to support.
It's proposed that this code is removed to lighten the maintenance cost of Vector and under the assumption that the new Vector that is currently in development and will soon be the default everywhere will solve this problem more elegantly.
Three proposals are suggested for removing this code to lightweight alternatives:
Proposals
Option 1 - just remove code
Remove code and do nothing. Optimizing Vector at 500px doesn't seem a valuable use of time.
This would cause wrapping of the tabs up to 760px, with gadgets, edit links 1100px+:
On user pages included from meta above 900px (as noted in T71729#6183822):
At 500px:
Option 2 - hide #right-navigation at smaller widths
The expectation would be that if users want to access these links they have to resize.
Note an additional media query rule would be needed for device-width to ensure that mobile phone users using Vector would still see the links.
Option 3 - increase the header height up to at 500px
This would keep the links accessible but without the complexity of the JS.
Tabs still wrap 500px - ca. 750px depending on language, font-size, page (actual tabs shows for the page).
@media screen and ( max-width: 500px ) {
#mw-page-base {
/* personal-menu (2.5em) + .vector-menu-tabs (2.5em) * 2: */
height: 7.5em;
}
}