From 2b397d05d27817f52fd032fcdff6baf7470c5b38 Mon Sep 17 00:00:00 2001
From: Nicholas Ray <nray@wikimedia.org>
Date: Fri, 13 Jan 2023 13:49:27 -0700
Subject: [PATCH] Scale server-rendered search box with browser font size

The server-rendered input's height was using pixels instead of relative units so
it did not scale with the browser's font size. This adjusts the styles of the
server-rendered input to match the styles used by Codex. In addition, the
magnifying glass dimensions were set to pixels to match the Codex icon.

Bug: T326863
Change-Id: I6aa5b60841087dfa5b32e873e3ed21a22c37353e
---
 bundlesize.config.json                                   | 2 +-
 .../components/VueEnhancedSearchBox.less                 | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index ca1888e8b..2adda09cc 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "11.9kB"
+		"maxSize": "12 kB"
 	},
 	{
 		"resourceModule": "skins.vector.legacy.js",
diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
index 797a31d3e..9bb3c9284 100644
--- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
+++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
@@ -12,7 +12,7 @@
 @size-base: 32px;
 
 @min-size-search-button: 30px;
-@background-size-x-search-button: unit( 20px / @font-size-browser / @font-size-base, em );
+@background-size-x-search-button: 20px;
 
 // Search container
 // We have to put those styles outside `.skin-vector-search-vue`,
@@ -39,7 +39,12 @@
 }
 
 .vector-search-box-vue .vector-search-box-input {
-	height: @size-base;
+	height: auto;
+	// The following is copied directly from Codex.
+	min-height: @size-base;
+	line-height: 1.4285714;
+	padding-top: 4px;
+	padding-bottom: 4px;
 }
 
 .vector-search-box-vue .searchButton {