fix(03): responsive employee form personal info

src/components/02_personnel-management/FormAddress.vue

@@ -79,10 +79,12 @@ watch(districtId, fetchSubDistrict);
 <template>
   <div class="col-12">
     <div class="col-12 app-text-muted row items-center q-mb-md">
-      • {{ title || $t('formDialogTitlePersonnelAddress') }}
+      <span class="q-mr-lg">
+        • {{ title || $t('formDialogTitlePersonnelAddress') }}
+      </span>
       <div
         v-if="employee"
-        class="q-ml-lg surface-3 q-px-sm q-py-xs row"
+        class="surface-3 q-px-sm q-py-xs row"
         style="border-radius: var(--radius-3)"
       >
         <span

src/components/02_personnel-management/FormPerson.vue

@@ -209,7 +209,7 @@ defineProps<{
       emit-value
       map-options
       :label="$t('formDialogInputGender')"
-      class="col-3"
+      class="col-md-3 col-6"
       option-label="label"
       option-value="value"
       v-model="gender"
@@ -231,7 +231,7 @@ defineProps<{
       map-options
       options-dense
       :label="$t('formDialogInputNationality')"
-      class="col-3"
+      class="col-md-3 col-6"
       option-label="label"
       option-value="label"
       v-model="nationality"

src/components/03_customer-management/BasicInformation.vue

@@ -42,10 +42,10 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">
+  <div class="col-md-3 col-12 app-text-muted">
     • {{ $t(`formDialogTitleInformation`) }}
   </div>
-  <div v-if="!employee" class="col-9 row q-col-gutter-md">
+  <div v-if="!employee" class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
       id="input-source-nationality"
       :dense="dense"
@@ -148,7 +148,7 @@ defineEmits<{
     />
   </div>
 
-  <div v-if="employee" class="col-9 row q-col-gutter-md">
+  <div v-if="employee" class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
       for="select-employer-branch"
       :use-input="!customerBranch"
@@ -250,16 +250,18 @@ defineEmits<{
       </template>
 
       <template v-slot:selected-item="scope">
-        <div v-if="scope.opt" class="row items-center no-wrap">
+        <div
+          v-if="scope.opt"
+          class="row items-center no-wrap"
+          style="width: 1px"
+        >
           <div class="q-mr-sm">
             {{ scope.opt.code }}
-
             {{ $t('branchName') }}:
             {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
           </div>
           <div
-            class="text-caption app-text-muted-2 ellipsis col"
+            class="text-caption app-text-muted-2"
-            style="max-width: 26vw"
             v-if="scope.opt.customer && scope.opt.province"
           >
             {{ $t('customerBranchName') }}:

src/components/03_customer-management/FormBusiness.vue

@@ -47,11 +47,8 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="col-12 app-text-muted"></div>
   <div class="col-12 row q-col-gutter-y-md">
-    <div class="col-3 q-pl-xl app-text-muted">
+    <div class="col-3 app-text-muted">• {{ $t('businessInformation') }}</div>
-      {{ $t('businessInformation') }}
-    </div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
         for="input-employment-office"

src/components/03_customer-management/FormEmployeePassport.vue

@@ -29,8 +29,10 @@ defineProps<{
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">• {{ $t(`formDialogTitlePassport`) }}</div>
+  <div class="col-md-3 col-12 app-text-muted">
-  <div class="col-9 row q-col-gutter-md">
+    • {{ $t(`formDialogTitlePassport`) }}
+  </div>
+  <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
       id="select-passport-type"
       :dense="dense"
@@ -44,7 +46,7 @@ defineProps<{
       option-value="value"
       option-label="label"
       :label="$t('formDialogInputPassportType')"
-      class="col-3"
+      class="col-md-3 col-12"
       :options="passportTypeOption"
       lazy-rules
       :rules="[
@@ -58,7 +60,7 @@ defineProps<{
       outlined
       :readonly="readonly"
       hide-bottom-space
-      class="col-3"
+      class="col-md-3 col-6"
       :label="$t('formDialogInputPassportNo')"
       v-model="passportNumber"
       :rules="[
@@ -82,7 +84,7 @@ defineProps<{
       outlined
       :readonly="readonly"
       hide-bottom-space
-      class="col-3"
+      class="col-md-3 col-6"
       :label="$t('formDialogInputWPassportPlace')"
       v-model="passportIssuingPlace"
       :rules="[
@@ -103,7 +105,7 @@ defineProps<{
       option-value="value"
       option-label="label"
       :label="$t('formDialogInputPassportCountry')"
-      class="col-3"
+      class="col-md-3 col-6"
       :options="passportIssuingCountryOption"
       lazy-rules
       :rules="[
@@ -121,7 +123,7 @@ defineProps<{
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
-      class="col-3"
+      class="col-md-3 col-6"
     >
       <template #year="{ value }">
         {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -178,7 +180,7 @@ defineProps<{
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
-      class="col-3"
+      class="col-md-3 col-6"
     >
       <template #year="{ value }">
         {{ $i18n.locale === 'th-th' ? value + 543 : value }}

src/components/03_customer-management/FormEmployeeVisa.vue

@@ -54,8 +54,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">• {{ $t(`formDialogTitleVisa`) }}</div>
+  <div class="col-md-3 col-12 app-text-muted">
-  <div class="col-9 row q-col-gutter-md">
+    • {{ $t(`formDialogTitleVisa`) }}
+  </div>
+  <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
       id="select-visa-type"
       :dense="dense"
@@ -69,7 +71,7 @@ onMounted(async () => {
       option-value="value"
       option-label="label"
       :label="$t('formDialogInputVisaType')"
-      class="col-3"
+      class="col-md-3 col-6"
       :options="visaTypeOption"
       lazy-rules
     />
@@ -83,7 +85,7 @@ onMounted(async () => {
       outlined
       :readonly="readonly"
       hide-bottom-space
-      class="col-3"
+      class="col-md-3 col-6"
       :label="$t('formDialogInputVisaNo')"
       v-model="visaNumber"
     />
@@ -101,7 +103,7 @@ onMounted(async () => {
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
-      class="col-3"
+      class="col-md-3 col-6"
     >
       <template #year="{ value }">
         {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -166,7 +168,7 @@ onMounted(async () => {
       :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
-      class="col-3"
+      class="col-md-3 col-6"
     >
       <template #year="{ value }">
         {{ $i18n.locale === 'th-th' ? value + 543 : value }}