From 4ff30a16a0f4dfb057b3adc1df527984b170b1e4 Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Thu, 29 Oct 2020 15:53:56 +0100
Subject: [PATCH] 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               | 11 ++++++++++-
 resources/skins.vector.styles/layout-default.less     |  9 ---------
 .../skins.vector.styles/layout-search-header.less     |  1 -
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/resources/skins.vector.styles/Menu.less b/resources/skins.vector.styles/Menu.less
index b5434bda..c880a61b 100644
--- a/resources/skins.vector.styles/Menu.less
+++ b/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
diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less
index dde685d5..99680049 100644
--- a/resources/skins.vector.styles/layout-default.less
+++ b/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;
diff --git a/resources/skins.vector.styles/layout-search-header.less b/resources/skins.vector.styles/layout-search-header.less
index 8c8bb68b..c6dedb84 100644
--- a/resources/skins.vector.styles/layout-search-header.less
+++ b/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;