fix: grid mode when screen xs

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

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import { BranchContact } from 'src/stores/branch-contact/types';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 import type { QTableProps } from 'quasar';
 
 import useBranchStore from 'stores/branch';
+import useFlowStore from 'src/stores/flow';
+import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
+import { Status } from 'src/stores/types';
 
 import useUtilsStore, { dialog } from 'src/stores/utils';
-import AppBox from 'components/app/AppBox.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
@@ -22,12 +26,7 @@ import FormImage from 'components/01_branch-management/FormImage.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 
-import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
-import { watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import useFlowStore from 'src/stores/flow';
-import { Status } from 'src/stores/types';
-
+const $q = useQuasar();
 const { t } = useI18n();
 const utilsStore = useUtilsStore();
 
@@ -170,6 +169,8 @@ onMounted(async () => {
   await branchStore.fetchList({ pageSize: 99999 });
   await calculateStats();
 
+  modeView.value = $q.screen.lt.md ? true : false;
+
   flowStore.rotate();
 });
 
@@ -497,6 +498,13 @@ watch(locale, () => {
     value: fieldSelectedBranch.value.value,
   };
 });
+
+watch(
+  () => $q.screen.lt.md,
+  (v) => {
+    if (v) modeView.value = true;
+  },
+);
 </script>
 
 <template>