From ee3cb0ba4057a679ec80cf02b8f71c1ddae1e4b2 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Sat, 3 Apr 2021 14:41:30 +0200
Subject: [PATCH] [style] QPage should be the first element, otherwise design
 is broken

---
 src/plugins/balance/pages/MainPage.vue   | 52 ++++++++++++------------
 src/plugins/user/pages/AdminSettings.vue | 38 ++++++++---------
 2 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/plugins/balance/pages/MainPage.vue b/src/plugins/balance/pages/MainPage.vue
index 9d1db49..105930e 100644
--- a/src/plugins/balance/pages/MainPage.vue
+++ b/src/plugins/balance/pages/MainPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
     <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
@@ -37,32 +37,30 @@
         </div>
       </q-list>
     </q-drawer>
-    <q-page padding class="fit row justify-left q-col-gutter-sm">
-      <q-tab-panels
-        v-model="tab"
-        style="background-color: transparent"
-        class="q-pa-none col-12"
-        animated
-      >
-        <q-tab-panel name="add" class="q-px-xs">
-          <BalanceAdd
-            @open-history="
-              showDrawer = !showDrawer;
-              show = true;
-            "
-          />
-        </q-tab-panel>
-        <q-tab-panel name="transfer" class="q-px-xs">
-          <BalanceTransfer
-            @open-history="
-              showDrawer = !showDrawer;
-              show = true;
-            "
-          />
-        </q-tab-panel>
-      </q-tab-panels>
-    </q-page>
-  </div>
+    <q-tab-panels
+      v-model="tab"
+      style="background-color: transparent"
+      class="q-pa-none col-12"
+      animated
+    >
+      <q-tab-panel name="add" class="q-px-xs">
+        <BalanceAdd
+          @open-history="
+            showDrawer = !showDrawer;
+            show = true;
+          "
+        />
+      </q-tab-panel>
+      <q-tab-panel name="transfer" class="q-px-xs">
+        <BalanceTransfer
+          @open-history="
+            showDrawer = !showDrawer;
+            show = true;
+          "
+        />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page>
 </template>
 
 <script lang="ts">
diff --git a/src/plugins/user/pages/AdminSettings.vue b/src/plugins/user/pages/AdminSettings.vue
index d735783..5dbf96f 100644
--- a/src/plugins/user/pages/AdminSettings.vue
+++ b/src/plugins/user/pages/AdminSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
     <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
@@ -24,25 +24,23 @@
         </q-item>
       </q-list>
     </q-drawer>
-    <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
-      <q-tab-panels
-        v-model="tab"
-        style="background-color: transparent"
-        class="q-ma-none q-pa-none fit row justify-center content-start items-start"
-        animated
-      >
-        <q-tab-panel name="user">
-          <UpdateUser />
-        </q-tab-panel>
-        <q-tab-panel name="newUser">
-          <NewUser />
-        </q-tab-panel>
-        <q-tab-panel name="roles">
-          <RoleSettings v-if="canEditRoles" />
-        </q-tab-panel>
-      </q-tab-panels>
-    </q-page>
-  </div>
+    <q-tab-panels
+      v-model="tab"
+      style="background-color: transparent"
+      class="q-ma-none q-pa-none fit row justify-center content-start items-start"
+      animated
+    >
+      <q-tab-panel name="user">
+        <UpdateUser />
+      </q-tab-panel>
+      <q-tab-panel name="newUser">
+        <NewUser />
+      </q-tab-panel>
+      <q-tab-panel name="roles">
+        <RoleSettings v-if="canEditRoles" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page>
 </template>
 
 <script lang="ts">