From b155e5712267a1e5c6cdff8984282aa229e67807 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 9 Jul 2024 11:50:38 +0700
Subject: [PATCH] fix: layout

---
 src/pages/04_product-service/MainPage.vue | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 23510488..d549795b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1567,7 +1567,7 @@ watch(inputSearchProductAndService, async () => {
       <!-- product/service -->
       <div
         v-else-if="productMode === 'service'"
-        class="surface-2 col bordered rounded column"
+        class="surface-2 col bordered rounded column no-wrap"
         style="overflow: hidden"
       >
         <div
@@ -1699,11 +1699,11 @@ watch(inputSearchProductAndService, async () => {
           <NoData :not-found="!!inputSearchProductAndService" />
         </div>
         <!-- tab -->
-        <div v-else class="row flex col">
+        <template v-else>
           <q-tabs
             dense
             v-model="productAndServiceTab"
-            class="col-12 bordered-b q-px-md"
+            class="bordered-b q-px-md"
             align="left"
           >
             <q-tab
@@ -1753,7 +1753,7 @@ watch(inputSearchProductAndService, async () => {
               </div>
             </q-tab>
           </q-tabs>
-          <div class="col-12 flex col scroll full-height q-pa-md surface-1">
+          <div class="col flex scroll full-height q-pa-md surface-1">
             <div class="full-width">
               <q-table
                 class="full-width"
@@ -2063,7 +2063,7 @@ watch(inputSearchProductAndService, async () => {
                 </template>
 
                 <template v-slot:item="{ row }">
-                  <div class="col-12 col-md-6">
+                  <div class="col-12 col-md-4 col-lg-2">
                     <TotalProductCardComponent
                       :data="row"
                       :key="row.id"
@@ -2119,13 +2119,9 @@ watch(inputSearchProductAndService, async () => {
               </q-table>
             </div>
           </div>
-        </div>
-
+        </template>
         <!-- footer -->
-        <div
-          class="row items-center justify-between q-px-md surface-2"
-          style="z-index: 99"
-        >
+        <div class="row items-center justify-between q-py-sm q-px-md surface-2">
           <div class="col-4">
             <div class="row items-center">
               <div class="app-text-muted" style="width: 80px">