fix: แก้ layout ค้นหา

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

@@ -1211,9 +1211,6 @@ onMounted(async () => {
   calculateStats();
   await fetchListGroups();
 
-  console.log(treeProductTypeAndGroup.value);
-
-  console.log('ddd');
   flowStore.rotate();
 });
 
@@ -1386,7 +1383,7 @@ watch(inputSearchProductAndService, async () => {
         <div class="surface-2 column full-height">
           <div
             class="row bordered-b q-pl-sm text-weight-bold items-center"
-            style="height: 56px"
+            :style="`height: ${$q.screen.lt.md ? '20%' : '56px'}`"
           >
             <div class="col">จัดการสาขาทั้งหมด</div>
           </div>
@@ -1646,14 +1643,15 @@ watch(inputSearchProductAndService, async () => {
           <!-- group/type -->
           <div
             v-if="productMode === 'group' || productMode === 'type'"
-            class="col justify-between surface-2 items-center full-width full-height justify-between"
+            class="surface-2 items-center full-width full-height justify-between"
           >
             <div
               class="q-px-md row bordered-b justify-between items-center"
-              style="height: 56px"
+              :class="{ ' ': $q.screen.lt.md }"
+              :style="`height: ${$q.screen.lt.md ? '20%' : '56px'}`"
             >
               <q-input
-                style="width: 300px"
+                :class="{ 'col-12': $q.screen.lt.md }"
                 outlined
                 dense
                 unelavated
@@ -2370,11 +2368,10 @@ watch(inputSearchProductAndService, async () => {
           >
             <div
               class="row justify-between items-center q-px-md q-py-sm rounded surface-2"
-              style="z-index: 1"
+              :style="`z-index: 1 ; height: ${$q.screen.lt.md ? '20%' : '56px'}`"
             >
-              <div>
               <q-input
-                  style="width: 300px"
+                :class="{ 'col-12': $q.screen.lt.md }"
                 outlined
                 dense
                 unelavated
@@ -2388,7 +2385,7 @@ watch(inputSearchProductAndService, async () => {
                   <q-icon name="mdi-magnify" />
                 </template>
               </q-input>
-              </div>
+
               <div class="row" style="gap: var(--size-2)">
                 <q-btn
                   icon="mdi-tune-vertical-variant"
@@ -2582,7 +2579,6 @@ watch(inputSearchProductAndService, async () => {
               class="flex justify-center items-center surface-1"
               :style="`height: ${hideStat ? '60vh' : '49vh'}`"
             >
-              {{ hideStat }}
               <NoData :not-found="!!inputSearchProductAndService" />
             </div>
             <!-- tab -->