1 files changed, 33 insertions, 12 deletions

diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index dbf600df9d6..58e46cfb70f 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -186,15 +186,12 @@ input[type='checkbox']:hover {
   }
 }
 
-.search-holder {
-  @include media-breakpoint-up(sm) {
-    display: flex;
-  }
+.search-field-holder,
+.project-filter-form {
+  flex: 1 0 auto;
+  position: relative;
 
-  .search-field-holder,
-  .project-filter-form {
-    flex: 1 0 auto;
-    position: relative;
+  .search-holder & {
     margin-right: 0;
 
     @include media-breakpoint-up(sm) {
@@ -202,6 +199,7 @@ input[type='checkbox']:hover {
     }
   }
 
+
   .search-icon {
     position: absolute;
     left: 10px;
@@ -215,9 +213,16 @@ input[type='checkbox']:hover {
     padding-left: $gl-padding + 15px;
     padding-right: $gl-padding + 15px;
   }
+}
+
+.search-holder {
+  @include media-breakpoint-up(sm) {
+    display: flex;
+  }
 
   .btn-search,
-  .btn-success {
+  .btn-success,
+  .dropdown-menu-toggle {
     width: 100%;
     margin-top: 5px;
 
@@ -236,9 +241,6 @@ input[type='checkbox']:hover {
   }
 
   .dropdown-menu-toggle {
-    width: 100%;
-    margin-top: 5px;
-
     @include media-breakpoint-up(sm) {
       width: 180px;
       margin-top: 0;
@@ -262,6 +264,25 @@ input[type='checkbox']:hover {
   }
 }
 
+.search-page-form {
+  .dropdown-menu-toggle,
+  .btn-search {
+    width: 100%;
+  }
+
+  .dropdown-menu-toggle {
+    @include media-breakpoint-up(lg) {
+      width: 240px;
+    }
+  }
+
+  .btn-search {
+    @include media-breakpoint-up(lg) {
+      width: auto;
+    }
+  }
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,