Fix #27840 - Improve the search bar experience on mobile

1 files changed, 45 insertions, 1 deletions

diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index e3da467a27c..d2be8dc7a39 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -26,6 +26,11 @@
 .filtered-search-container {
   display: -webkit-flex;
   display: flex;
+
+  @media (max-width: $screen-xs-min) {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
 }
 
 .filtered-search-input-container {
@@ -34,6 +39,20 @@
   position: relative;
   width: 100%;
 
+  @media (max-width: $screen-xs-min) {
+    -webkit-flex: 1 1 100%;
+    flex: 1 1 100%;
+    margin-bottom: 10px;
+
+    .dropdown-menu {
+      width: auto;
+      left: 0;
+      right: 0;
+      max-width: none;
+      min-width: 100%;
+    }
+  }
+
   .form-control {
     padding-left: 25px;
     padding-right: 25px;
@@ -79,6 +98,31 @@
   overflow: auto;
 }
 
+@media (max-width: $screen-xs-min) {
+  .issues-details-filters {
+    padding: 0 0 10px;
+    background-color: $white-light;
+    border-top: 0;
+  }
+
+  .filter-dropdown-container {
+    .dropdown-toggle,
+    .dropdown {
+      width: 100%;
+    }
+
+    .dropdown {
+      margin-left: 0;
+    }
+
+    .fa-chevron-down {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+  }
+}
+
 %filter-dropdown-item-btn-hover {
   background-color: $dropdown-hover-color;
   color: $white-light;
@@ -148,4 +192,4 @@
 
 .filter-dropdown-loading {
   padding: 8px 16px;
-}
+}
\ No newline at end of file