Merge branch 'kp-fix-filtered-search-mobile-layout' into 'master'

Fix Filtered Search bar layout on small screens

See merge request gitlab-org/gitlab!34061

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -221,7 +221,7 @@ export default {
 </script>
 
 <template>
-  <div class="vue-filtered-search-bar-container d-flex">
+  <div class="vue-filtered-search-bar-container d-md-flex">
     <gl-filtered-search
       v-model="filterValue"
       :placeholder="searchInputPlaceholder"
@@ -230,8 +230,8 @@ export default {
       class="flex-grow-1"
       @submit="handleFilterSubmit"
     />
-    <gl-button-group class="ml-2">
-      <gl-dropdown :text="selectedSortOption.title" :right="true">
+    <gl-button-group class="sort-dropdown-container d-flex">
+      <gl-dropdown :text="selectedSortOption.title" :right="true" class="w-100">
         <gl-dropdown-item
           v-for="sortBy in sortOptions"
           :key="sortBy.id"
@@ -245,6 +245,7 @@ export default {
         v-gl-tooltip
         :title="sortDirectionTooltip"
         :icon="sortDirectionIcon"
+        class="flex-shrink-1"
         @click="handleSortDirectionClick"
       />
     </gl-button-group>

app/assets/stylesheets/framework/filters.scss

@@ -449,3 +449,17 @@
     font-size: 13px;
   }
 }
+
+.vue-filtered-search-bar-container {
+  @include media-breakpoint-up(md) {
+    .sort-dropdown-container {
+      margin-left: 10px;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .sort-dropdown-container {
+      margin-top: 10px;
+    }
+  }
+}