From d72d018ba28c60ed251e1d6fb6b52c0898831766 Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Tue, 13 Nov 2018 10:43:34 -0500
Subject: [PATCH] Fix alignment of filter inputs on member listing page

---
 styles/components/_search_bar.scss      |  2 ++
 templates/workspaces/members/index.html | 40 +++++++++++++------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/styles/components/_search_bar.scss b/styles/components/_search_bar.scss
index 715c982c..28b536c5 100644
--- a/styles/components/_search_bar.scss
+++ b/styles/components/_search_bar.scss
@@ -27,6 +27,8 @@
     flex-basis: 100%;
 
     .usa-input {
+      flex-basis: 100%;
+
       @media (min-width:1000px) {
         margin-top: 0;
       }
diff --git a/templates/workspaces/members/index.html b/templates/workspaces/members/index.html
index 83f4ba32..9b0e1e5f 100644
--- a/templates/workspaces/members/index.html
+++ b/templates/workspaces/members/index.html
@@ -61,26 +61,28 @@
       <button type="button"></button>
     </div>
 
-    <div class='usa-input filter-input'>
-      <label for='filter-status'>Filter members by status</label>
-      <select v-model="status" id="filter-status" name="filter-status">
-        <option value="" selected disabled>Filter by status</option>
-        <option value="all">View All</option>
-        {% for status in status_choices %}
-          <option value='{{ status.name }}'>{{ status.display_name }}</option>
-        {% endfor %}
-      </select>
-    </div>
+    <div class="search-bar__filters">
+      <div class='usa-input'>
+        <label for='filter-status'>Filter members by status</label>
+        <select v-model="status" id="filter-status" name="filter-status">
+          <option value="" selected disabled>Filter by status</option>
+          <option value="all">View All</option>
+          {% for status in status_choices %}
+            <option value='{{ status.name }}'>{{ status.display_name }}</option>
+          {% endfor %}
+        </select>
+      </div>
 
-    <div class='usa-input filter-input'>
-      <label for='filter-role'>Filter members by role</label>
-      <select v-model="role" id="filter-role" name="filter-role">
-        <option value="" selected disabled>Filter by role</option>
-        <option value="all">View All</option>
-        {% for role in role_choices %}
-          <option value='{{ role.name }}'>{{ role.display_name }}</option>
-        {% endfor %}
-      </select>
+      <div class='usa-input'>
+        <label for='filter-role'>Filter members by role</label>
+        <select v-model="role" id="filter-role" name="filter-role">
+          <option value="" selected disabled>Filter by role</option>
+          <option value="all">View All</option>
+          {% for role in role_choices %}
+            <option value='{{ role.name }}'>{{ role.display_name }}</option>
+          {% endfor %}
+        </select>
+      </div>
     </div>
   </form>