Add latest changes from gitlab-org/gitlab@master

2 files changed, 45 insertions, 38 deletions

diff --git a/app/assets/javascripts/search/sidebar/components/app.vue b/app/assets/javascripts/search/sidebar/components/app.vue
index 2efc80fef75..7c9e30a2d97 100644
--- a/app/assets/javascripts/search/sidebar/components/app.vue
+++ b/app/assets/javascripts/search/sidebar/components/app.vue
@@ -27,7 +27,9 @@ export default {
 </script>
 
 <template>
-  <section class="search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4 gl-mb-6 gl-mt-5">
+  <section
+    class="search-sidebar gl-display-flex gl-flex-direction-column gl-md-mr-5 gl-mb-6 gl-mt-5"
+  >
     <scope-navigation />
     <results-filters v-if="showIssueAndMergeFilters" />
     <language-filter v-if="showBlobFilter" />
diff --git a/app/assets/javascripts/search/topbar/components/app.vue b/app/assets/javascripts/search/topbar/components/app.vue
index da6039f4758..d4f866713a8 100644
--- a/app/assets/javascripts/search/topbar/components/app.vue
+++ b/app/assets/javascripts/search/topbar/components/app.vue
@@ -86,45 +86,50 @@ export default {
 </script>
 
 <template>
-  <section class="search-page-form gl-lg-display-flex gl-flex-direction-column">
-    <div class="gl-lg-display-flex gl-flex-direction-row gl-align-items-flex-end">
-      <div class="gl-flex-grow-1 gl-mb-4 gl-lg-mb-0 gl-lg-mr-2">
-        <div
-          class="gl-sm-display-flex gl-flex-direction-row gl-justify-content-space-between gl-mb-4 gl-md-mb-0"
-        >
-          <label>{{ $options.i18n.searchLabel }}</label>
-          <template v-if="showSyntaxOptions">
-            <gl-button
-              category="tertiary"
-              variant="link"
-              size="small"
-              button-text-classes="gl-font-sm!"
-              @click="onToggleDrawer"
-              >{{ $options.i18n.syntaxOptionsLabel }}
-            </gl-button>
-            <markdown-drawer
-              ref="markdownDrawer"
-              :document-path="$options.SYNTAX_OPTIONS_DOCUMENT"
-            />
-          </template>
+  <section class="gl-p-5 gl-bg-gray-10 gl-border-b">
+    <div class="search-page-form gl-lg-display-flex gl-flex-direction-column">
+      <div class="gl-lg-display-flex gl-flex-direction-row gl-align-items-flex-end">
+        <div class="gl-flex-grow-1 gl-mb-4 gl-lg-mb-0 gl-lg-mr-2">
+          <div
+            class="gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-mb-0 gl-md-mb-4"
+          >
+            <label class="gl-mb-1 gl-md-pb-2">{{ $options.i18n.searchLabel }}</label>
+            <template v-if="showSyntaxOptions">
+              <gl-button
+                category="tertiary"
+                variant="link"
+                size="small"
+                button-text-classes="gl-font-sm!"
+                @click="onToggleDrawer"
+                >{{ $options.i18n.syntaxOptionsLabel }}
+              </gl-button>
+              <markdown-drawer
+                ref="markdownDrawer"
+                :document-path="$options.SYNTAX_OPTIONS_DOCUMENT"
+              />
+            </template>
+          </div>
+          <gl-search-box-by-click
+            id="dashboard_search"
+            v-model="search"
+            name="search"
+            :placeholder="$options.i18n.searchPlaceholder"
+            @submit="applyQuery"
+          />
+        </div>
+        <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-3">
+          <label class="gl-display-block gl-mb-1 gl-md-pb-2">{{
+            $options.i18n.groupFieldLabel
+          }}</label>
+          <group-filter :initial-data="groupInitialJson" />
+        </div>
+        <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-ml-3">
+          <label class="gl-display-block gl-mb-1 gl-md-pb-2">{{
+            $options.i18n.projectFieldLabel
+          }}</label>
+          <project-filter :initial-data="projectInitialJson" />
         </div>
-        <gl-search-box-by-click
-          id="dashboard_search"
-          v-model="search"
-          name="search"
-          :placeholder="$options.i18n.searchPlaceholder"
-          @submit="applyQuery"
-        />
-      </div>
-      <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-mx-3">
-        <label class="gl-display-block">{{ $options.i18n.groupFieldLabel }}</label>
-        <group-filter :initial-data="groupInitialJson" />
-      </div>
-      <div v-if="showFilters" class="gl-mb-4 gl-lg-mb-0 gl-lg-ml-3">
-        <label class="gl-display-block">{{ $options.i18n.projectFieldLabel }}</label>
-        <project-filter :initial-data="projectInitialJson" />
       </div>
     </div>
-    <hr class="gl-mt-5 gl-mb-0 gl-border-gray-100" />
   </section>
 </template>