From 9b31740514601562d04e38fe62647d46ecc2e14d Mon Sep 17 00:00:00 2001 From: jdlrobson 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 8ced075a2..4825adeaf 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; + } + } }