Make the account page mobile friendly

Author: DaneEveritt

resources/assets/scripts/components/dashboard/Account.vue

@@ -6,14 +6,18 @@
                 <TwoFactorAuthentication/>
             </modal>
             <flash container="mt-6 mb-2 mx-4"/>
-            <div class="flex">
-                <div class="flex-1 m-4 ml-0">
-                    <update-email class="mb-8"/>
-                    <div class="bg-white p-6 border border-grey-light rounded rounded-1 text-center">
-                        <button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
+            <div class="flex flex-wrap">
+                <div class="w-full md:w-1/2">
+                    <div class="m-4 md:ml-0">
+                        <update-email class="mb-8"/>
+                        <div class="content-box text-center">
+                            <button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
+                        </div>
                     </div>
                 </div>
-                <change-password class="flex-1 m-4 mr-0"/>
+                <div class="w-full md:w-1/2">
+                    <change-password class="m-4 md:mr-0"/>
+                </div>
             </div>
         </div>
     </div>

resources/assets/scripts/components/dashboard/account/ChangePassword.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <form action="" method="post">
-            <div class="bg-white p-6 border border-grey-light rounded rounded-1">
+            <div class="content-box">
                 <h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
                 <div class="mt-6">
                     <label for="grid-password-current" class="input-label">Current password</label>

resources/assets/scripts/components/dashboard/account/UpdateEmail.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class>
         <form method="post" v-on:submit.prevent="submitForm">
-            <div class="bg-white p-6 border border-grey-light rounded rounded-1">
+            <div class="content-box">
                 <h2 class="mb-6 text-grey-darkest font-medium">Update your email</h2>
                 <div>
                     <label for="grid-email" class="input-label">Email address</label>

resources/assets/styles/components/miscellaneous.css

@@ -42,6 +42,13 @@ code {
     }
 }
 
+/**
+ * Styling for elements that contain the core page content.
+ */
+.content-box {
+    @apply .bg-white .p-6 .border .border-grey-light .rounded;
+}
+
 /**
  * Flex boxes for server listing on user dashboard.
  */