Sync location/other styles of #mw-searchButton with #searchButton

`#mw-searchButton` is apparently used with no-js clients or if the
js-search is broken [1]. Its position and dimensions should be kept in
sync with #searchButton.

This commit:

* Ensures that the same styles, including position, applied to #searchButton
are applied to "#mw-searchButton" so the dimensions are identical. This
should also address a critique in T270202 by removing the "invisible
button".

* Applies a `client-js` selector to ensure these buttons are
only positioned to the left of the search input if js is enabled. If js
is not enabled, having these positioned to the left is confusing as the
input has no obvious "submit" button.

* Syncs the input's end padding to match WVUI's input's end padding if
JS is enabled.

[1] 465e9492bb/includes/templates/SearchBox.mustache (L12-L21)

Bug: T270202
Change-Id: Ie1bb8c68b713b3a18f90ee11b44c78b436a6d0ba

bundlesize.config.json

@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "9.2 kB"
+		"maxSize": "9.3 kB"
 	},
 	{
 		"resourceModule": "skins.vector.styles.responsive",

resources/skins.vector.styles/VueEnhancedSearchBox.less

@@ -28,7 +28,8 @@
 
 // Typeahead search elements
 #searchInput,
-#searchButton {
+#searchButton,
+#mw-searchButton {
 	// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
 	font-size: inherit;
 }
@@ -37,13 +38,15 @@
 	height: @size-base;
 }
 
-#searchButton {
+#searchButton,
+#mw-searchButton {
 	background-size: @background-size-x-search-button auto;
 	min-height: @min-size-search-button;
 }
 
-// TODO: Parent class can be removed when $wgVectorUseCoreSearch is no longer supported.
-.skin-vector-search-vue {
+// Only apply the following WVUI-related rules to clients who have js enabled.
+// TODO: .skin-vector-search-vue class can be removed when $wgVectorUseCoreSearch is no longer supported.
+.client-js .skin-vector-search-vue {
 	// Derived from @size-search-figure in WVUI
 	// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21
 	@size-search-figure: unit( 36px / @font-size-browser / @font-size-base, em );
@@ -61,6 +64,8 @@
 
 	#searchInput {
 		padding-left: @size-search-figure;
+		// Derived from @padding-input-text in WVUI's Input component.
+		padding-right: 8px;
 
 		// Recreate WVUI expanding input.
 		&:focus {
@@ -73,7 +78,8 @@
 	}
 
 	// Move & resize search icon to match WVUI.
-	#searchButton {
+	#searchButton,
+	#mw-searchButton {
 		// Override the default right & left position of the icon.
 		right: auto;
 		left: 0;