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,25 +2368,24 @@ 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"
-                  outlined
-                  dense
-                  unelavated
-                  :label="$t('search')"
-                  class="q-mr-md"
-                  :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-                  v-model="inputSearchProductAndService"
-                  debounce="250"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="mdi-magnify" />
-                  </template>
-                </q-input>
-              </div>
+              <q-input
+                :class="{ 'col-12': $q.screen.lt.md }"
+                outlined
+                dense
+                unelavated
+                :label="$t('search')"
+                class="q-mr-md"
+                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                v-model="inputSearchProductAndService"
+                debounce="250"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="mdi-magnify" />
+                </template>
+              </q-input>
+
               <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 -->