Add style to ensure menu uses display flex

Fixes alignment of menu item in latest vector 2022

Author: jdlrobson

dist/MoreMenu.js

@@ -365,7 +365,7 @@ $(function () {
       case 'vector':
         return mw.util.addCSS("\n\t\t\t\t.mm-tab .vector-menu-content {\n\t\t\t\t\theight: initial;\n\t\t\t\t\toverflow: initial !important;\n\t\t\t\t}\n\t\t\t\t.mm-menu .mw-list-item {\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\tbackground: var(--background-color-base, #ffffff);\n\t\t\t\t\tborder: 1px solid #a2a9b1;\n\t\t\t\t\tmin-width: 120px !important;\n\t\t\t\t\t".concat(rightKey, ": inherit !important;\n\t\t\t\t\ttop: -1px !important;\n\t\t\t\t}\n\t\t\t\t#p-views {\n\t\t\t\t\tpadding-left: inherit !important;\n\t\t\t\t\tpadding-right: inherit !important;\n\t\t\t\t}\n\t\t\t\t#p-views .vector-menu-content::after {\n\t\t\t\t\tdisplay: none !important;\n\t\t\t\t}\n\t\t\t\t.rtl #p-views .vector-menu-content::before {\n\t\t\t\t\tdisplay: none !important;\n\t\t\t\t}\n\t\t\t\t.mm-submenu .mm-item {\n\t\t\t\t\tfont-size: inherit !important;\n\t\t\t\t}\n\t\t\t"));
       case 'vector-2022':
-        return mw.util.addCSS("\n\t\t\t\t#p-page-dropdown .vector-dropdown-content,\n\t\t\t\t#p-user-dropdown .vector-dropdown-content {\n\t\t\t\t\theight: initial;\n\t\t\t\t\toverflow-x: initial !important;\n\t\t\t\t\toverflow-y: initial !important;\n\t\t\t\t\ttop: 35px !important;\n\t\t\t\t}\n\t\t\t\t#p-page-dropdown .vector-dropdown-content::after,\n\t\t\t\t#p-user-dropdown .vector-dropdown-content::after {\n\t\t\t\t\tdisplay: none !important;\n\t\t\t\t}\n\t\t\t\t.mm-menu .mw-list-item {\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\tbackground: var(--background-color-base, #ffffff);;\n\t\t\t\t\tbox-shadow: 0 2px 6px -1px rgba(0,0,0,0.2);\n\t\t\t\t\tmin-width: 120px !important;\n\t\t\t\t\tpadding: 1px 10px;\n\t\t\t\t\ttop: -1px !important;\n\t\t\t\t}\n\t\t\t\t#p-views {\n\t\t\t\t\tpadding-left: inherit !important;\n\t\t\t\t\tpadding-right: inherit !important;\n\t\t\t\t}\n\t\t\t");
+        return mw.util.addCSS("\n\t\t\t\t#p-page-dropdown {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\t\t\t\t#p-page-dropdown .vector-dropdown-content,\n\t\t\t\t#p-user-dropdown .vector-dropdown-content {\n\t\t\t\t\theight: initial;\n\t\t\t\t\toverflow-x: initial !important;\n\t\t\t\t\toverflow-y: initial !important;\n\t\t\t\t\ttop: 35px !important;\n\t\t\t\t}\n\t\t\t\t#p-page-dropdown .vector-dropdown-content::after,\n\t\t\t\t#p-user-dropdown .vector-dropdown-content::after {\n\t\t\t\t\tdisplay: none !important;\n\t\t\t\t}\n\t\t\t\t.mm-menu .mw-list-item {\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\tbackground: var(--background-color-base, #ffffff);;\n\t\t\t\t\tbox-shadow: 0 2px 6px -1px rgba(0,0,0,0.2);\n\t\t\t\t\tmin-width: 120px !important;\n\t\t\t\t\tpadding: 1px 10px;\n\t\t\t\t\ttop: -1px !important;\n\t\t\t\t}\n\t\t\t\t#p-views {\n\t\t\t\t\tpadding-left: inherit !important;\n\t\t\t\t\tpadding-right: inherit !important;\n\t\t\t\t}\n\t\t\t");
       case 'timeless':
         return mw.util.addCSS("\n\t\t\t\t.mm-submenu-wrapper {\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\t\t\t\t.mm-submenu {\n\t\t\t\t\tbackground: #f8f9fa;\n\t\t\t\t\tborder: 1px solid rgb(200, 204, 209);\n\t\t\t\t\tbox-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);\n\t\t\t\t\tpadding: 1.2em 1.5em !important;\n\t\t\t\t\ttop: -1.2em;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\tz-index: 95;\n\t\t\t\t}\n\t\t\t\t.mm-submenu::after {\n\t\t\t\t\tborder-bottom: 8px solid transparent;\n\t\t\t\t\tborder-top: 8px solid transparent;\n\t\t\t\t\tborder-".concat(leftKey, ": 8px solid rgb(200, 204, 209);\n\t\t\t\t\tcontent: '';\n\t\t\t\t\theight: 0;\n\t\t\t\t\tpadding-").concat(rightKey, ": 4px;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 20px;\n\t\t\t\t\twidth: 0;\n\t\t\t\t\t").concat(rightKey, ": -13px;\n\t\t\t\t}\n\t\t\t\t@media screen and (max-width: 1339px) and (min-width: 1100px) {\n\t\t\t\t\t.mm-submenu::after {\n\t\t\t\t\t\tborder-").concat(leftKey, ": none;\n\t\t\t\t\t\tborder-").concat(rightKey, ": 8px solid rgb(200, 204, 209);\n\t\t\t\t\t\tpadding-").concat(leftKey, ": 4px;\n\t\t\t\t\t\tpadding-").concat(rightKey, ": inherit;\n\t\t\t\t\t\t").concat(rightKey, ": inherit;\n\t\t\t\t\t\t").concat(leftKey, ": -35px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@media screen and (max-width: 850px) {\n\t\t\t\t\t.mm-submenu {\n\t\t\t\t\t\ttop: -2.2em;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"));
       case 'monobook':

src/MoreMenu.js

@@ -410,6 +410,9 @@ $( () => {
 			` );
 			case 'vector-2022':
 				return mw.util.addCSS( `
+				#p-page-dropdown {
+					display: flex;
+				}
 				#p-page-dropdown .vector-dropdown-content,
 				#p-user-dropdown .vector-dropdown-content {
 					height: initial;