Fix #27840 - Improve the search bar experience on mobile

4 files changed, 55 insertions, 3 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
index fbc72a3001a..dd565da507e 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
@@ -48,7 +48,11 @@
     }
 
     setOffset(offset = 0) {
-      this.dropdown.style.left = `${offset}px`;
+      if (window.innerWidth > 480) {
+        this.dropdown.style.left = `${offset}px`;
+      } else {
+        this.dropdown.style.left = '0px';
+      }
     }
 
     renderContent(forceShowList = false) {
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
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 8e04b50bb8a..62f09cc2dc1 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -82,7 +82,7 @@
                   %span.dropdown-label-box{ style: 'background: {{color}}' }
                   %span.label-title.js-data-value
                     {{title}}
-        .pull-right
+        .pull-right.filter-dropdown-container
           = render 'shared/sort_dropdown'
 
     - if @bulk_edit
diff --git a/changelogs/unreleased/27840-improve-search-bar-experience.yml b/changelogs/unreleased/27840-improve-search-bar-experience.yml
new file mode 100644
index 00000000000..87b1f0c5572
--- /dev/null
+++ b/changelogs/unreleased/27840-improve-search-bar-experience.yml
@@ -0,0 +1,4 @@
+---
+title: Enhanced filter issues layout for better mobile experiance
+merge_request: 9280
+author: Pratik Borsadiya