Added whitespace and centered the page contents

17th Website/src/views/users.vue

@@ -1,5 +1,4 @@
 <script>
-import { ref } from 'vue'
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
 import { Icon } from '@iconify/vue'
 import QueryApolloGraphQL from '../api/request'
@@ -80,12 +79,14 @@ export default {
 </script>
 
 <template>
+    <div id="wrapper" class="w-full flex flex-wrap content-center flex-col">
         <!-- Page header (but not really) -->
         <div id="header">
 
             <h1>Members</h1>
             <div id="searchRow">
-            <input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')" class="mx-2" />
+                <input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')"
+                    class="mx-2 max-w-md" />
                 <div id="dropdownWrapper">
 
                     <Listbox v-model="unitFilter" class="w-32 mx-2">
@@ -141,7 +142,7 @@ export default {
             </div>
 
         </div>
-    <table id="userTable">
+        <table id="userTable" class="max-w-screen-xl">
             <thead>
                 <tr>
                     <th>Member</th>
@@ -160,6 +161,7 @@ export default {
                 </tr>
             </tbody>
         </table>
+    </div>
 </template>
 
 <style scoped>