From df3954eff84a392c47e5b5f1f974201a97b464cb Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Tue, 1 Sep 2020 14:28:39 +0200
Subject: [PATCH] [IE9] Layout flex-box adjustments

Minor visual fix for IE9 for modern mode with search not in header.
i.e. with these settings:

    $wgVectorIsSearchInHeader = false;
    $wgVectorDefaultSkinVersion = 2;

Slight refactor of CSS. Removes block of styles that "reset" floats.
These were uneccessary because as flex-children, the floats were
ignored on those elements anyway.

Moves flex-wrap on .mw-header from layout-search-header.less
to layout-default.less since that's where display:flex is defined
and the rule is general enough that it should apply for different layouts.

Remove the @supports block with the `float:none;`. That is unnecessary
because flex-children are not affected by floats.

Change-Id: Ida3d2a7bc2b2f70238129df876714228fe5cdf84
---
 .../skins.vector.styles/layout-default.less   |  2 ++
 .../layout-search-header.less                 | 32 +++----------------
 2 files changed, 6 insertions(+), 28 deletions(-)

diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less
index 1fb063e39..aa601c422 100644
--- a/resources/skins.vector.styles/layout-default.less
+++ b/resources/skins.vector.styles/layout-default.less
@@ -54,6 +54,7 @@ body {
 	// Vertical centering of header elements (IE>=11), requires flex.
 	// Non-flex fallback for IE<=9: float rule on the child elements.
 	.flex-display();
+	flex-wrap: wrap;
 	// https://caniuse.com/#search=align-items
 	align-items: center;
 	z-index: @z-index-header;
@@ -153,6 +154,7 @@ body {
 }
 
 #mw-sidebar-button {
+	float: left; // Browser: IE9 support - button as flex-child fallback.
 	margin-left: -@margin-horizontal-sidebar-button-icon;
 	margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
 }
diff --git a/resources/skins.vector.styles/layout-search-header.less b/resources/skins.vector.styles/layout-search-header.less
index d1d903b0e..8ced075a2 100644
--- a/resources/skins.vector.styles/layout-search-header.less
+++ b/resources/skins.vector.styles/layout-search-header.less
@@ -29,6 +29,9 @@
 
 	// Header components
 	#p-search {
+		flex-grow: 1;
+		// Support IE9: float will be disabled if display flex is supported
+		float: left;
 		// Override values to reflect new behaviour.
 		min-width: @min-width-search;
 		max-width: 100%;
@@ -40,13 +43,8 @@
 		}
 	}
 
-	// Support IE9: float will be disabled if display flex is supported
-	#p-search,
-	#mw-sidebar-button {
-		float: left;
-	}
-
 	#p-personal {
+		flex-grow: 1;
 		text-align: right;
 		flex-basis: @min-width-personal-tools;
 		margin-left: @margin-horizontal-search;
@@ -55,25 +53,3 @@
 		float: right;
 	}
 }
-
-// If flexbox supported reset the floats that are supporting IE9
-// When IE9 is no longer supported this entire query can be dropped.
-@supports ( display: flex ) {
-	.skin-vector-search-header {
-		.mw-header {
-			flex-wrap: wrap;
-		}
-
-		#p-personal,
-		#p-search {
-			flex-grow: 1;
-			// Disable the float: left rule for IE9 support
-			float: none;
-		}
-
-		#mw-sidebar-button {
-			// Disable the float: left rule for IE9 support
-			float: none;
-		}
-	}
-}