Convert personal menu to use flexbox alignment.

Uses flexbox alignment to resolve an issue where the
clickable area of the notification and alert icons were
overlapping with the links next to them.

Bug: T264339
Change-Id: I2afc12504d7184583fa8331479125474c68017dc

resources/skins.vector.styles/Menu.less

@@ -1,7 +1,16 @@
 @import '../../variables.less';
 @import 'mediawiki.mixins.less';
 
-/* Personal */
+/* Personal Menu */
+#p-personal .vector-menu-content-list {
+	display: flex;
+	flex-wrap: wrap;
+	flex-grow: 1;
+	justify-content: flex-end;
+	align-items: baseline;
+}
+
+/* Personal Menu */
 .mw-portlet {
 	// Hidden by default, but displayed by certain menus
 	// e.g. MenuPortal

resources/skins.vector.styles/layout-default.less

@@ -97,15 +97,6 @@ body {
 	float: right;
 }
 
-#p-personal {
-	li {
-		// Some extensions e.g. Echo may change the height of list items
-		// If that's the case we want to ensure all other elements are vertically aligned consistently.
-		vertical-align: middle;
-		display: inline-block;
-	}
-}
-
 #mw-sidebar-button {
 	float: left; // Browser: IE9 support - button as flex-child fallback.
 	margin-left: -@margin-horizontal-sidebar-button-icon;

resources/skins.vector.styles/layout-search-header.less

@@ -45,7 +45,6 @@
 
 	#p-personal {
 		flex-grow: 1;
-		text-align: right;
 		flex-basis: @min-width-personal-tools;
 		margin-left: @margin-horizontal-search;