From 422955e1608d99a170b69f1782962b2424d8ba9f Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Mon, 21 Sep 2020 09:53:32 +0200
Subject: [PATCH] Prevent Vector tabs from overlapping search loader

Bug: T254695
Change-Id: I8391407b8efa5b8165f8b2c33de8849de642ecb5
---
 resources/skins.vector.styles/SearchBoxLoader.less | 10 +++++++---
 variables.less                                     |  1 +
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/resources/skins.vector.styles/SearchBoxLoader.less b/resources/skins.vector.styles/SearchBoxLoader.less
index 9c6fbe39e..b9153d220 100644
--- a/resources/skins.vector.styles/SearchBoxLoader.less
+++ b/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% )
diff --git a/variables.less b/variables.less
index a8ec1e24a..ceb598fb4 100644
--- a/variables.less
+++ b/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.