Commit 7acd9c41 authored by Kushal Pandya's avatar Kushal Pandya

Fix filtered search bar layout on small screens

parent 4c1dff36
......@@ -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>
......
......@@ -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;
}
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment