From bd2558d507b98cda5fcb987b5ec26ffd676ced5f Mon Sep 17 00:00:00 2001
From: Jai Bhagat <jaybhagat841@gmail.com>
Date: Sat, 20 Nov 2021 14:48:28 -0500
Subject: [PATCH] fix:  re-order multiselect and search boxes

---
 ui/app/styles/components/boxed-section.scss |  9 +++++
 ui/app/templates/clients/client/index.hbs   | 44 +++++++++++----------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/ui/app/styles/components/boxed-section.scss b/ui/app/styles/components/boxed-section.scss
index bcebd868f..901dc7503 100644
--- a/ui/app/styles/components/boxed-section.scss
+++ b/ui/app/styles/components/boxed-section.scss
@@ -19,6 +19,15 @@
       margin-left: auto;
     }
 
+    .is-subsection {
+      display: flex;
+      align-items: baseline;
+
+      .is-padded {
+        padding: 0em 0em 0em 1em;
+      }
+    }
+
     .is-fixed-width {
       display: inline-block;
       width: 8em;
diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs
index e9f64dee0..3ccb8de5d 100644
--- a/ui/app/templates/clients/client/index.hbs
+++ b/ui/app/templates/clients/client/index.hbs
@@ -294,27 +294,29 @@
           </button>
         {{/if}}
       </div>
-      <SearchBox
-        @searchTerm={{mut this.searchTerm}}
-        @onChange={{action this.resetPagination}}
-        @placeholder="Search allocations..."
-        @class="is-inline pull-right"
-        @inputClass="is-compact"
-      />
-      <MultiSelectDropdown
-        data-test-allocation-status-facet
-        @label="Status"
-        @options={{this.optionsAllocationStatus}}
-        @selection={{this.selectionStatus}}
-        @onSelect={{action "setFacetQueryParam" "qpStatus"}}
-      />
-      <MultiSelectDropdown
-        data-test-allocation-task-group-facet
-        @label="Task Group"
-        @options={{this.optionsTaskGroups}}
-        @selection={{this.selectionTaskGroup}}
-        @onSelect={{action "setFacetQueryParam" "qpTaskGroup"}}
-      />
+      <div class="pull-right is-subsection">
+        <MultiSelectDropdown
+          data-test-allocation-status-facet
+          @label="Status"
+          @options={{this.optionsAllocationStatus}}
+          @selection={{this.selectionStatus}}
+          @onSelect={{action "setFacetQueryParam" "qpStatus"}}
+        />
+        <MultiSelectDropdown
+          data-test-allocation-task-group-facet
+          @label="Task Group"
+          @options={{this.optionsTaskGroups}}
+          @selection={{this.selectionTaskGroup}}
+          @onSelect={{action "setFacetQueryParam" "qpTaskGroup"}}
+        />
+        <SearchBox
+          @searchTerm={{mut this.searchTerm}}
+          @onChange={{action this.resetPagination}}
+          @placeholder="Search allocations..."
+          @inputClass="is-compact"
+          @class="is-padded"
+        />
+      </div>
     </div>
     <div class="boxed-section-body is-full-bleed">
       <ListPagination