Limiting search-field styling to search only

- Re-organising search.scss
- Rely more on utility-classes instead of component classes
- Update relevant specs

app/assets/stylesheets/pages/search.scss

@@ -186,25 +186,20 @@ input[type='checkbox']:hover {
   }
 }
 
-.search-holder {
-
-  @include media-breakpoint-up(lg) {
-    display: flex;
-    align-items: flex-end;
-  }
-
-  .search-field-holder,
-  .project-filter-form {
+.search-field-holder,
+.project-filter-form {
   flex: 1 0 auto;
   position: relative;
+
+  .search-holder & {
     margin-right: 0;
 
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(sm) {
       margin-right: 5px;
-      margin-bottom: 0;
     }
   }
 
+
   .search-icon {
     position: absolute;
     left: 10px;
@@ -218,13 +213,20 @@ 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;
 
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(sm) {
       width: auto;
       margin-top: 0;
       margin-left: 5px;
@@ -232,21 +234,15 @@ input[type='checkbox']:hover {
   }
 
   .dropdown {
-    margin-bottom: $gl-padding;
-
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(sm) {
       margin-left: 5px;
       margin-right: 5px;
-      margin-bottom: 0;
     }
   }
 
   .dropdown-menu-toggle {
-    width: 100%;
-    margin-top: 5px;
-
-    @include media-breakpoint-up(lg) {
-      width: 240px;
+    @include media-breakpoint-up(sm) {
+      width: 180px;
       margin-top: 0;
     }
   }
@@ -268,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,

app/views/search/_filter.html.haml

@@ -2,10 +2,10 @@
   = hidden_field_tag :group_id, params[:group_id]
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
-.dropdown
-  %label{ for: "dashboard_search_group" }
+.dropdown.form-group.mb-lg-0.mx-lg-1
+  %label.d-block{ for: "dashboard_search_group" }
     = _("Group")
-  %button.form-control.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
+  %button.dropdown-menu-toggle.js-search-group-dropdown.mt-0{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
     %span.dropdown-toggle-text
       - if @group.present?
         = @group.name
@@ -18,10 +18,10 @@
     = dropdown_content
     = dropdown_loading
 
-.dropdown.project-filter
-  %label{ for: "dashboard_search_project" }
+.dropdown.project-filter.form-group.mb-lg-0.mx-lg-1
+  %label.d-block{ for: "dashboard_search_project" }
     = _("Project")
-  %button.form-control.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown"} }
+  %button.dropdown-menu-toggle.js-search-project-dropdown.mt-0{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown"} }
     %span.dropdown-toggle-text
       - if @project.present?
         = @project.full_name

app/views/search/_form.html.haml

-= form_tag search_path, method: :get, class: 'js-search-form' do |f|
+= form_tag search_path, method: :get, class: 'search-page-form js-search-form' do |f|
   = hidden_field_tag :snippets, params[:snippets]
   = hidden_field_tag :scope, params[:scope]
 
-  .search-holder
-    .search-field-holder.form-group
+  .d-lg-flex.align-items-end
+    .search-field-holder.form-group.mr-lg-1.mb-lg-0
       %label{ for: "dashboard_search" }
         = _("What are you searching for?")
       .position-relative
@@ -16,5 +16,5 @@
     - unless params[:snippets].eql? 'true'
       = render 'filter'
     .d-flex-center.flex-column.flex-lg-row
-      = button_tag _("Search"), class: "btn btn-success btn-search form-control"
+      = button_tag _("Search"), class: "btn btn-success btn-search form-control mt-lg-0 ml-lg-1 align-self-end"
       = render_if_exists 'search/form_elasticsearch'

spec/features/search/user_uses_search_filters_spec.rb

@@ -22,7 +22,7 @@ describe 'User uses search filters', :js do
 
       wait_for_requests
 
-      page.within('.search-holder') do
+      page.within('.search-page-form') do
         click_link(group.name)
       end