[style] QPage should be the first element, otherwise design is broken

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">

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">