From 746bdc8b01a2b8254c6733c0fe336bcf316a7f09 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Wed, 7 Nov 2018 12:11:42 -0500
Subject: [PATCH] Styling tweaks

---
 styles/components/_search_bar.scss | 10 +++++++++-
 templates/requests/index.html      | 32 ++++++++++++++++--------------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/styles/components/_search_bar.scss b/styles/components/_search_bar.scss
index dbc795d2..5a001601 100644
--- a/styles/components/_search_bar.scss
+++ b/styles/components/_search_bar.scss
@@ -6,10 +6,18 @@
   padding: $gap;
   flex-wrap: wrap;
 
+  @include media($large-screen) {
+    flex-wrap: nowrap;
+  }
+
+  .search-bar__filters {
+    display: flex;
+  }
+
   .usa-input {
     margin: 0;
     flex-grow: 1;
-    flex-shrink: 0;
+    flex-shrink: 1;
     flex-basis: 100%;
     height: $search-input-height;
     position: relative;
diff --git a/templates/requests/index.html b/templates/requests/index.html
index e005e954..c024abd6 100644
--- a/templates/requests/index.html
+++ b/templates/requests/index.html
@@ -94,22 +94,24 @@
           </button>
         </div>
 
-        <div class='usa-input'>
-          <label for='filter-status'>Filter requests by status</label>
-          <select v-model="statusValue" id="filter-status" name="filter-status">
-            <option value="" selected disabled>Filter by status</option>
-            <option value="">All</option>
-            <option v-for="status in statuses" :value="status">!{ status }</option>
-          </select>
-        </div>
+        <div class="search-bar__filters">
+          <div class='usa-input'>
+            <label for='filter-status'>Filter requests by status</label>
+            <select v-model="statusValue" id="filter-status" name="filter-status">
+              <option value="" selected disabled>Filter by status</option>
+              <option value="">All</option>
+              <option v-for="status in statuses" :value="status">!{ status }</option>
+            </select>
+          </div>
 
-        <div class='usa-input'>
-          <label for='filter-dod-component'>Filter requests by DOD component</label>
-          <select v-model="dodComponentValue" id="filter-dod-component" name="filter-dod-component">
-            <option value="" selected disabled>Filter by DOD Component</option>
-            <option value="">All</option>
-            <option v-for="dodComponent in dodComponents" :value="dodComponent">!{ dodComponent }</option>
-          </select>
+          <div class='usa-input'>
+            <label for='filter-dod-component'>Filter requests by DOD component</label>
+            <select v-model="dodComponentValue" id="filter-dod-component" name="filter-dod-component">
+              <option value="" selected disabled>Filter by DOD Component</option>
+              <option value="">All</option>
+              <option v-for="dodComponent in dodComponents" :value="dodComponent">!{ dodComponent }</option>
+            </select>
+          </div>
         </div>
       </form>
     {% endif %}