optimize layout

nager · Jun 17, 2024 · df6214d · df6214d
1 parent fcd7ee5
commit df6214d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/Frontend/src/components/MfaConfigurationBox.vue b/src/Frontend/src/components/MfaConfigurationBox.vue
@@ -153,18 +153,20 @@ 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"
             size="3rem"
             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
@@ -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>