From 7a6e0742d39d3c1d59a215d99bfbd1aefae524c5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 16 Jul 2024 02:52:53 +0000
Subject: [PATCH] fix: 02 responsive tool bar

---
 src/pages/02_personnel-management/MainPage.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 19959c3b..75d7c03b 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -718,9 +718,8 @@ watch(inputSearch, async () => await fetchUserList());
               for="input-search"
               outlined
               dense
-              style="width: 250px"
               :label="$t('search')"
-              class="q-mr-md"
+              class="q-mr-md col-12 col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
               debounce="200"
@@ -730,14 +729,17 @@ watch(inputSearch, async () => await fetchUserList());
               </template>
             </q-input>
 
-            <div class="row">
+            <div
+              class="row col-12 col-md-4"
+              :class="{ 'q-pt-xs': $q.screen.lt.md }"
+            >
               <q-select
                 v-model="statusFilter"
                 outlined
                 dense
                 option-value="value"
                 option-label="label"
-                class="q-pr-md"
+                class="col"
                 map-options
                 emit-value
                 :options="[
@@ -751,6 +753,7 @@ watch(inputSearch, async () => await fetchUserList());
                 v-if="!modeView"
                 id="select-field"
                 for="select-field"
+                class="col q-mx-sm"
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
@@ -772,7 +775,7 @@ watch(inputSearch, async () => await fetchUserList());
                 id="btn-mode"
                 v-model="modeView"
                 dense
-                class="no-shadow bordered rounded surface-1 q-ml-md"
+                class="no-shadow bordered rounded surface-1"
                 :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                 size="xs"
                 :options="[