Mobile updates for search UI

1 files changed, 35 insertions, 5 deletions

diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 4a5149ee64d..4f5b4bae208 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -154,16 +154,46 @@
 }
 
 .search-holder {
-  display: -webkit-flex;
-  display:         flex;
+  @media (min-width: $screen-sm-min) {
+    display: -webkit-flex;
+    display:         flex;
+  }
 
   .search-field-holder {
     position: relative;
     width: 100%;
+    margin-right: 0;
+
+    @media (min-width: $screen-sm-min) {
+      margin-right: 5px;
+    }
   }
 
-  .dropdown-toggle {
-    width: 160px;
-    text-align: left;
+  .btn-search {
+    width: 100%;
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      width: auto;
+      margin-top: 0;
+      margin-left: 5px;
+    }
+  }
+
+  .dropdown {
+    @media (min-width: $screen-sm-min) {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+
+  .dropdown-menu-toggle {
+    width: 100%;
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      width: 160px;
+      margin-top: 0;
+    }
   }
 }