refactor: move stat out

src/components/StatCardComponent.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AppBox from 'components/app/AppBox.vue';
-import { vModelSelect } from 'vue';
 
 const props = withDefaults(
   defineProps<{
@@ -22,17 +21,17 @@ const props = withDefaults(
 
 <template>
   <div
-    class="row full-width"
+    class="row"
     style="gap: var(--size-4)"
     :class="{ dark, 'no-wrap': nowrap }"
   >
     <AppBox
       v-for="v in props.branch"
-      :key="v.label"
-      class="col-12 no-padding shadow-2"
+      class="no-padding shadow-2"
       :class="{ [`stat-card__${v.color}`]: true }"
+      :key="v.label"
     >
-      <div class="stat-card__content row items-center q-pa-md">
+      <div class="stat-card__content row items-center q-px-md q-py-sm">
         <div class="col-4 text-center">
           <q-avatar
             size="lg"

src/pages/01_branch-management/MainPage.vue

@@ -436,11 +436,13 @@ watch(locale, () => {
 
 <template>
   <div class="column full-height no-wrap">
-    <div class="surface-1 bordered rounded q-mb-md scroll">
-      <div class="q-ma-md" style="display: inline-block">
-        <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
-      </div>
-    </div>
+    <StatCard
+      class="q-pb-md"
+      label-i18n
+      :branch="stats"
+      :dark="$q.dark.isActive"
+      nowrap
+    />
 
     <div
       class="column col surface-1 bordered rounded scroll"