fix: product & service scroll

src/components/04_product-service/TotalProductCardComponent.vue

@@ -43,7 +43,7 @@ withDefaults(
     bordered
     :class="{ 'is-add-product': isAddProduct }"
     class="column bordered rounded q-pa-sm no-wrap"
-    style="box-shadow: var(--shadow-3); height: 20rem"
+    style="height: 20rem"
     @click="$emit('select', data)"
   >
     <div class="row flex justify-between text-bold">

src/pages/04_product-service/MainPage.vue

@@ -1142,6 +1142,48 @@ watch(inputSearchProductAndService, async () => {
     </div>
 
     <div v-if="stat[0].count !== 0" class="column full-height no-wrap">
+      <div
+        v-if="productMode === 'group' || productMode === 'type'"
+        class="text-body-2 q-mb-xs flex items-center"
+      >
+        {{ $t('dataSum') }}
+        <q-btn
+          class="q-ml-xs"
+          icon="mdi-pin"
+          color="primary"
+          size="sm"
+          flat
+          dense
+          rounded
+          @click="hideStat = !hideStat"
+          :style="hideStat ? 'rotate: 90deg' : ''"
+          style="transition: 0.1s ease-in-out"
+        />
+      </div>
+
+      <transition
+        v-if="productMode === 'group' || productMode === 'type'"
+        name="slide"
+      >
+        <div
+          v-if="
+            (productMode === 'group' && !hideStat) ||
+            (productMode === 'type' && !hideStat)
+          "
+          class="scroll q-mb-md"
+        >
+          <div style="display: inline-block">
+            <StatCard
+              label-i18n
+              :branch="stat"
+              :dark="$q.dark.isActive"
+              nowrap
+            />
+          </div>
+        </div>
+      </transition>
+
+      <!-- title type/service -->
       <div
         class="row items-center q-mb-md"
         v-if="productMode === 'service' || productMode === 'type'"
@@ -1182,47 +1224,10 @@ watch(inputSearchProductAndService, async () => {
         </div>
       </div>
 
+      <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="text-body-2 q-mb-xs flex items-center"
+        class="surface-1 col bordered rounded q-pa-md scroll column"
-      >
-        {{ $t('dataSum') }}
-        <q-btn
-          class="q-ml-xs"
-          icon="mdi-pin"
-          color="primary"
-          size="sm"
-          flat
-          dense
-          rounded
-          @click="hideStat = !hideStat"
-          :style="hideStat ? 'rotate: 90deg' : ''"
-          style="transition: 0.1s ease-in-out"
-        />
-      </div>
-
-      <transition name="slide">
-        <div
-          v-if="
-            (productMode === 'group' && !hideStat) ||
-            (productMode === 'type' && !hideStat)
-          "
-          class="scroll q-mb-md"
-        >
-          <div style="display: inline-block">
-            <StatCard
-              label-i18n
-              :branch="stat"
-              :dark="$q.dark.isActive"
-              nowrap
-            />
-          </div>
-        </div>
-      </transition>
-
-      <div
-        v-if="productMode === 'group' || productMode === 'type'"
-        class="surface-1 col bordered rounded q-pa-md scroll"
       >
         <div class="row justify-between">
           <div
@@ -1304,7 +1309,7 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
 
-        <div class="row q-col-gutter-lg">
+        <div class="row q-col-gutter-md col scroll">
           <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
             v-for="(v, i) in productMode === 'type'
@@ -1433,7 +1438,7 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="flex items-center justify-between q-pt-xl"
+            class="flex items-center justify-between"
           >
             <div class="col-4">
               <div class="row items-center">
@@ -1490,7 +1495,7 @@ watch(inputSearchProductAndService, async () => {
 
           <div
             v-if="productMode === 'type'"
-            class="flex justify-between q-pt-xl"
+            class="flex justify-between items-center"
           >
             <div class="col-4">
               <div class="row items-center">
@@ -1545,11 +1550,16 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </template>
       </div>
+
+      <!-- product/service -->
       <div
         v-else-if="productMode === 'service'"
-        class="surface-1 col bordered rounded scroll"
+        class="surface-1 col bordered rounded column"
+      >
+        <div
+          class="row justify-between items-center surface-1 rounded"
+          style="z-index: 1"
         >
-        <div class="row justify-between q-px-md">
           <q-tabs v-model="productAndServiceTab" dense>
             <q-tab
               name="all"
@@ -1652,7 +1662,7 @@ watch(inputSearchProductAndService, async () => {
             </q-tab>
           </q-tabs>
 
-          <div class="row q-pt-sm q-mb-sm">
+          <div class="row">
             <q-input
               style="width: 300px"
               outlined
@@ -1734,9 +1744,13 @@ watch(inputSearchProductAndService, async () => {
           <NoData :not-found="!!inputSearchProductAndService" />
         </div>
 
-        <div class="row q-col-gutter-lg flex" style="padding: 20px">
+        <!-- tab -->
         <div
-            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+          v-if="productAndService && productAndService.length > 0"
+          class="row flex q-pa-md q-col-gutter-md col scroll"
+        >
+          <div
+            class="col-md-3 col-sm-6 col-12"
             v-for="i in productAndServiceTab === 'all'
               ? productAndService
               : productAndServiceTab === 'product'
@@ -1796,7 +1810,9 @@ watch(inputSearchProductAndService, async () => {
             />
           </div>
         </div>
-        <div class="row justify-between q-pb-md q-px-lg">
+
+        <!-- footer -->
+        <div class="flex items-center justify-between q-pb-md q-px-md">
           <div class="col-4">
             <div class="row items-center">
               <div class="app-text-muted" style="width: 80px">