From c8a8e913d26a82148b7fd5c349abdf7f67c7e663 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 25 Jul 2024 10:48:04 +0000
Subject: [PATCH] fix: scroll tab

---
 src/components/DrawerInfo.vue   |  3 ++-
 src/components/FormDialog.vue   |  5 -----
 src/components/TabComponent.vue | 11 ++++++++---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 477609eb..0898a691 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -153,8 +153,9 @@ function reset() {
             resetValidation
           />
         </div>
+
         <div
-          class="col-10 form-body"
+          class="col-10 form-body full-width"
           style="position: relative"
           :class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`"
         >
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 6ff7755c..8466917a 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -175,7 +175,6 @@ const currentTab = defineModel<string>('currentTab');
                 class="content-tab text-capitalize"
                 :name="tab.name"
                 :label="$t(tab.label)"
-                style="z-index: 999"
               />
             </q-tabs>
           </div>
@@ -352,8 +351,4 @@ const currentTab = defineModel<string>('currentTab');
   border-top-right-radius: var(--radius-2);
   position: relative;
 }
-
-:deep(.q-tabs__content) {
-  overflow: visible;
-}
 </style>
diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
index 5c423f98..7ea20865 100644
--- a/src/components/TabComponent.vue
+++ b/src/components/TabComponent.vue
@@ -68,7 +68,7 @@ function close(index: number) {
 }
 </script>
 <template>
-  <div class="row no-wrap">
+  <div class="row no-wrap full-width">
     <q-btn
       :id="`${prefixId}-btn-add`"
       class="q-px-lg bordered-b bordered-r app-text-muted"
@@ -84,10 +84,13 @@ function close(index: number) {
       :active-color="$q.dark.isActive ? 'white' : 'primary'"
       indicator-color="transparent"
       active-class="bordered-r"
+      dense
       v-model="tab"
       align="left"
       inline-label
-      class="text-grey"
+      mobile-arrows
+      class="text-grey col"
+      :breakpoint="0"
       style="background-color: var(--_body-bg); max-width: 55vw"
     >
       <q-tab
@@ -102,15 +105,17 @@ function close(index: number) {
         :class="tab === index ? '' : 'bordered-b bordered-r'"
       >
         <q-btn
+          v-if="!readonly && customerBranch?.length !== 1"
           round
           flat
           :id="`${prefixId}-close-tab-${index}`"
           icon="mdi-close"
+          size="sm"
           padding="xs"
           color="red"
+          class="q-ml-sm"
           :class="{ dark: $q.dark.isActive }"
           @click.stop="close(index)"
-          v-if="!readonly"
         />
       </q-tab>
     </q-tabs>