fix: 04-product service layout

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

@@ -29,7 +29,7 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
 import useFlowStore from 'src/stores/flow';
 import { Status } from 'src/stores/types';
 
-import { dialog, dialogWarningClose } from 'src/stores/utils';
+import useUtilsStore, { dialog, dialogWarningClose } from 'src/stores/utils';
 
 import useProductServiceStore from 'src/stores/product-service';
 import {
@@ -46,6 +46,7 @@ import {
 } from 'src/stores/product-service/types';
 
 const flowStore = useFlowStore();
+const utilsStore = useUtilsStore();
 const productServiceStore = useProductServiceStore();
 const optionStore = useOptionStore();
 
@@ -971,6 +972,9 @@ function cloneData() {
 }
 
 onMounted(async () => {
+  utilsStore.currentTitle.title = 'mainProductTitle';
+  utilsStore.currentTitle.caption = 'mainProductCaption';
+
   calculateStats();
   await fetchListGroups();
   flowStore.rotate();
@@ -1075,17 +1079,12 @@ watch(inputSearchProductAndService, async () => {
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="column q-pb-lg">
-    <div class="row text-h6 text-weight-bold q-mb-md">
-      {{ $t('productAndService') }}
-    </div>
-
+  <div class="column full-height no-wrap">
     <AppBox
       v-if="stat[0].count === 0"
       class="column"
       :no-padding="productGroup?.length !== 0"
       bordered
-      style="min-height: 70vh"
     >
       <TooltipComponent
         class="self-end"
@@ -1102,7 +1101,7 @@ watch(inputSearchProductAndService, async () => {
       </div>
     </AppBox>
 
-    <div v-if="stat[0].count !== 0">
+    <div v-if="stat[0].count !== 0" class="column full-height no-wrap">
       <div
         class="row items-center q-mb-md"
         v-if="productMode === 'service' || productMode === 'type'"
@@ -1150,10 +1149,9 @@ watch(inputSearchProductAndService, async () => {
       >
         <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
       </AppBox>
-      <AppBox
+      <div
         v-if="productMode === 'group' || productMode === 'type'"
-        bordered
-        style="min-height: 80vh"
+        class="surface-1 col bordered rounded q-pa-md scroll"
       >
         <div class="row justify-between">
           <div
@@ -1408,8 +1406,11 @@ watch(inputSearchProductAndService, async () => {
             />
           </div>
         </template>
-      </AppBox>
-      <AppBox bordered v-else-if="productMode === 'service'" no-padding>
+      </div>
+      <div
+        v-else-if="productMode === 'service'"
+        class="surface-1 col bordered rounded scroll"
+      >
         <div class="row justify-between q-px-md">
           <q-tabs v-model="productAndServiceTab" dense>
             <q-tab
@@ -1683,7 +1684,7 @@ watch(inputSearchProductAndService, async () => {
             "
           />
         </div>
-      </AppBox>
+      </div>
     </div>
   </div>