Prevent Vector tabs from overlapping search loader

Bug: T254695
Change-Id: I8391407b8efa5b8165f8b2c33de8849de642ecb5

resources/skins.vector.styles/SearchBoxLoader.less

@@ -11,6 +11,9 @@
  * above the loading indicator.
  *
  **/
+
+@import '../../variables.less';
+
 #simpleSearch.search-form__loader:after {
 	// Set the i18n message.
 	content: attr( data-loading-msg );
@@ -18,12 +21,10 @@
 	// Position loader below the input.
 	display: block;
 	position: absolute;
-	//
-	// IE9-11 have some issues, but not with this basic use-case.
 	top: 100%;
 	width: 100%;
 	//
-	// Ensure it doesn't extend beyond the input.
+	// Ensure the 100% width doesn't extend beyond the input.
 	box-sizing: border-box;
 	//
 	// Align loader style with input.
@@ -40,6 +41,9 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	//
+	// Prevent Vector tabs from overlapping T254695#6461044
+	z-index: @z-index-search-loader;
+	//
 	// Add a progress-bar to the loading indicator,
 	// but only show it animating after 1 second of loading.
 	background: /*image*/ linear-gradient( 90deg, @colorProgressive 0%, @colorProgressive 100% )

variables.less

@@ -116,6 +116,7 @@
 @z-index-sidebar: 1;
 @z-index-menu-checkbox: 1;
 @z-index-search-button: 1;
+@z-index-search-loader: 1;
 // Ensure that this is displayed on top of .mw-body-content and clickable.
 @z-index-indicators: 1;
 // See skinStyles/jquery.ui/jquery.ui.slider.css.