When modifying skin menu definitions, modifying the class usually has the impact of modifying the class of the list item LI. However, in the case of the user menu dropdown this does not appear to the be the case. This prevents us from hiding the menu items at lower resolutions and thus prevents us from making many modifications to padding.

When adding the class to signal a menu item should collapse using the class parameter, like so:
https://github.com/wikimedia/Vector/blob/master/includes/Hooks.php#L157
the class ends up on the anchor tag, instead of the list item resulting in the HTML:

<li id="pt-userpage">
  <a href="/wiki/User:Jdlrobson" class="user-links-collapsible-item mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userAvatar" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a>
</li>

rather than the HTML:

<li id="pt-userpage" class="user-links-collapsible-item mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userAvatar">
  <a href="/wiki/User:Jdlrobson" dir="auto" title="Your user page [⌃⌥.]" accesskey=".">Jdlrobson</a>
</li>

Presumably, this is an inherited behaviour from the old system.

Luckily, since the new menu was only added in 1.37 (which hasn't been released and is therefore not stable) we can retain the old behaviour for skins using the flattened list containing all items, and fix the behaviour of the new menu by modification.

QA steps

• Log in as a new user or a user without a sandbox
• In https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?useskinversion=1 log in and inspect the HTML of the sandbox menu. The class "new" should be on the anchor tag and the link should be red

• Use skin version 2, in https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?useskinversion=2 log in and inspect the HTML of the sandbox menu. The class "new" should be on the anchor tag and should not be red. The classes mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-markup should be on the list item

QA Results - Beta