From e2f07f47cbf32c3f554f601f9e8b965c55d97d69 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 3 Jul 2024 11:00:45 +0000
Subject: [PATCH] fix: stat responsive

---
 src/pages/01_branch-management/MainPage.vue   |  4 +-
 src/pages/03_customer-management/MainPage.vue | 43 ++++++++++---------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 72dd2e2f..f6b27e3f 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -424,8 +424,8 @@ watch(locale, () => {
 
 <template>
   <div class="column full-height no-wrap">
-    <div class="surface-1 bordered rounded q-pa-md q-mb-md">
-      <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" />
+    <div class="surface-1 bordered rounded q-pa-md q-mb-md scroll">
+      <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
     </div>
 
     <div
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 84911886..eb584522 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1334,26 +1334,27 @@ watch([inputSearch, currentStatus], async () => {
 
   <div class="column full-height no-wrap">
     <div v-if="isMainPage" class="column full-height">
-      <div class="row full-width q-mb-md no-wrap">
-        <SelectorList
-          clickable
-          :list="selectorList"
-          v-model:selector="selectorLabel"
-          class="q-mr-md col-3"
-        />
+      <div class="row full-width q-pb-md q-gutter-y-md">
+        <div class="col-sm-5 col-md-3 col-12 q-mr-md">
+          <SelectorList
+            clickable
+            :list="selectorList"
+            v-model:selector="selectorLabel"
+            class="full-height"
+          />
+        </div>
 
         <!-- stat -->
-        <AppBox bordered class="column full-width">
-          <div class="row q-pb-sm justify-between items-center">
-            <div class="text-weight-bold text-subtitle1">
-              {{
-                selectorLabel === 'EMPLOYER'
-                  ? $t('customerEmployerStatTitle')
-                  : $t('customerEmployeeStatTitle')
-              }}
-            </div>
+        <div class="col-12 col-sm bordered surface-1 rounded">
+          <div class="text-weight-bold text-subtitle1 q-pa-md">
+            {{
+              selectorLabel === 'EMPLOYER'
+                ? $t('customerEmployerStatTitle')
+                : $t('customerEmployeeStatTitle')
+            }}
           </div>
-          <div class="row full-width" style="overflow-x: auto">
+
+          <div class="q-px-md scroll">
             <StatCardComponent
               v-if="customerStats && selectorLabel === 'EMPLOYER'"
               labelI18n
@@ -1371,7 +1372,8 @@ watch([inputSearch, currentStatus], async () => {
                 }))
               "
               :dark="$q.dark.isActive"
-              class="no-wrap"
+              nowrap
+              class="q-mb-md"
             />
 
             <StatCardComponent
@@ -1385,10 +1387,11 @@ watch([inputSearch, currentStatus], async () => {
                 },
               ]"
               :dark="$q.dark.isActive"
-              class="no-wrap"
+              nowrap
+              class="q-mb-md"
             />
           </div>
-        </AppBox>
+        </div>
       </div>
 
       <!-- main -->