From df6214d612156b18bb771848a8f50c85cec92b1a Mon Sep 17 00:00:00 2001
From: Tino Hager <tino.hager@nager.at>
Date: Mon, 17 Jun 2024 13:52:13 +0200
Subject: [PATCH] optimize layout

---
 .../src/components/MfaConfigurationBox.vue       | 16 +++++++++-------
 src/Frontend/src/pages/AccountPage.vue           |  4 ++--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/Frontend/src/components/MfaConfigurationBox.vue b/src/Frontend/src/components/MfaConfigurationBox.vue
index 10b9d7a..4a38d86 100644
--- a/src/Frontend/src/components/MfaConfigurationBox.vue
+++ b/src/Frontend/src/components/MfaConfigurationBox.vue
@@ -153,8 +153,11 @@ function stepperPrevious () {
       </template>
     </q-stepper>
     <div v-else>
-      <div>
-        <div class="mfa-box bg-green q-pa-md rounded-borders">
+      <q-card
+        flat
+        bordered
+      >
+        <q-card-section class="mfa-box bg-green q-pa-md rounded-borders">
           <q-icon
             name="security"
             color="white"
@@ -162,9 +165,8 @@ function stepperPrevious () {
             class="q-pr-md"
           />
           MFA is active
-        </div>
-
-        <div class="q-mt-md">
+        </q-card-section>
+        <q-card-section>
           To deactivate MFA, please provide another code.
           <q-form @submit.prevent="deactivate()">
             <q-input
@@ -183,8 +185,8 @@ function stepperPrevious () {
               :loading="processing"
             />
           </q-form>
-        </div>
-      </div>
+        </q-card-section>
+      </q-card>
     </div>
   </div>
 </template>
diff --git a/src/Frontend/src/pages/AccountPage.vue b/src/Frontend/src/pages/AccountPage.vue
index e4429e5..f359fcb 100644
--- a/src/Frontend/src/pages/AccountPage.vue
+++ b/src/Frontend/src/pages/AccountPage.vue
@@ -10,10 +10,10 @@ import MfaConfigurationBox from '../components/MfaConfigurationBox.vue'
     <h1>Account</h1>
 
     <div class="row q-col-gutter-xl">
-      <div class="col-12 col-md-4">
+      <div class="col-12 col-md-5 col-lg-4">
         <PasswordChangeBox />
       </div>
-      <div class="col-12 col-md-4">
+      <div class="col-12 col-md-5 col-lg-4">
         <MfaConfigurationBox />
       </div>
     </div>