From 9b31740514601562d04e38fe62647d46ecc2e14d Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Thu, 3 Sep 2020 09:56:36 -0700
Subject: [PATCH] Reduce max-width and adjust margin-left

* The margin-left should only be auto at small resolutions - otherwise on large
monitors it becomes visually separated from the logo
* the margin left should be larger
* and max width should be smaller.

Bug: T261686
Change-Id: Ia1331f51764a34f113e3336735e6cfd5fde1d49d
---
 .../skins.vector.styles/layout-search-header.less | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/resources/skins.vector.styles/layout-search-header.less b/resources/skins.vector.styles/layout-search-header.less
index 8ced075..4825ade 100644
--- a/resources/skins.vector.styles/layout-search-header.less
+++ b/resources/skins.vector.styles/layout-search-header.less
@@ -2,8 +2,8 @@
 // Assumes various variables defined there.
 
 @min-width-search: unit( 350px / @font-size-browser, em );
-@max-width-search: unit( 580px / @font-size-browser, em );
-@margin-horizontal-search: unit( 40px / @font-size-browser, em );
+@max-width-search: unit( 450px / @font-size-browser, em );
+@margin-horizontal-search: unit( 56px / @font-size-browser, em );
 
 // The logo is variable width but typically consists of:
 // - a icon (50x50)
@@ -38,7 +38,7 @@
 		margin: 0 0 0 @margin-horizontal-search;
 
 		#searchform {
-			margin-left: auto;
+			margin-left: 0;
 			max-width: @max-width-search;
 		}
 	}
@@ -52,4 +52,13 @@
 		// Support IE9: This is reset in @support query below if Flexbox is available.
 		float: right;
 	}
+
+	// At low resolutions the search must be pushed to the right of the screen
+	// We use @width-comfortable to determine this threshold as we know it's not possible for
+	// personal tools to be on the same line at this resolution.
+	@media ( max-width: @width-comfortable ) {
+		#p-search #searchform {
+			margin-left: auto;
+		}
+	}
 }