From b07c70d8436eccc1b8243d07cd52ce1d22487460 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Thu, 10 Feb 2022 12:32:21 -0600
Subject: [PATCH] UX: Search spacing & position changes (#15882)

---
 .../stylesheets/common/base/search.scss       | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index e54dbc40b37..ec7911f4382 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -1,5 +1,5 @@
 @mixin search-page-spacing {
-  padding: 2rem 10%;
+  padding: 1rem 10%;
 
   @include breakpoint(medium) {
     padding: 1rem;
@@ -63,7 +63,6 @@
 
   .search-advanced {
     position: relative;
-
     .search-actions,
     .search-title,
     .search-bar {
@@ -76,19 +75,17 @@
 
     .search-info {
       display: flex;
-      @include search-page-spacing();
       flex-wrap: wrap;
+      padding: 1em 10%;
+      background-color: var(--secondary);
       border-bottom: 1px solid var(--primary-low);
-      padding-top: 2em;
-      margin-bottom: 2em;
-      flex-direction: row;
-      align-items: flex-start;
-      justify-content: flex-start;
+      @include breakpoint(medium) {
+        padding: 0.5em 0;
+      }
 
       &.bulk-select-visible {
         @include sticky;
         top: 60px;
-        background-color: var(--secondary);
         z-index: 10;
       }
 
@@ -97,7 +94,10 @@
       }
 
       button {
-        margin: 0 0.5em 0.5em 0;
+        margin: 0 0.5em 0 0;
+        @include breakpoint(medium) {
+          margin: 0 0.5em 0.5em 0;
+        }
       }
 
       #bulk-select {
@@ -110,6 +110,13 @@
           margin-right: 0.5em;
         }
       }
+
+      .sort-by.inline-form label {
+        margin-bottom: 0;
+      }
+      #search-sort-by {
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -229,7 +236,7 @@
 
 .fps-result {
   display: flex;
-  padding: 0 0.5em;
+  padding: 0 0.5em 0 0;
   margin-bottom: 2em;
   max-width: 100%;
   word-break: break-word;
@@ -258,10 +265,10 @@
     align-items: baseline;
     .bulk-select {
       position: absolute;
-      left: 0px;
-      top: 0px;
-      padding: 0.5em;
-      background: var(--tertiary-very-low);
+      left: 0.5em;
+      top: 0.75em;
+      padding: 0.25em 0.5em;
+      background-color: var(--tertiary-low);
       input[type="checkbox"] {
         margin: 0;
       }