From fc5f715808ccf49d05dbf218df0a71a467d092d6 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 18:18:26 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20flexbox=20?=
 =?UTF-8?q?=E0=B8=96=E0=B8=B6=E0=B8=87=E0=B9=81=E0=B8=81=E0=B9=88=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/Profile.vue        | 154 +++++++++---------
 1 file changed, 79 insertions(+), 75 deletions(-)

diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 5a58aaa59..ee974426e 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -392,83 +392,87 @@
         <q-form ref="myForm">
           <q-card-section class="q-py-sm row">
             <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
-            <q-file
-              class="col-5"
-              outlined
-              dense
-              v-model="filePassaway"
-              label="แนบใบมรณบัตร"
-              hide-bottom-space
-              lazy-rules
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" />
-              </template>
-            </q-file>
-            <q-separator />
-            <q-input
-              class="col-7"
-              dense
-              outlined
-              v-model="deathCertificateNo"
-              label="เลขที่ใบมรณบัตร"
-            />
-            <q-separator />
-            <datepicker
-              class="col-5"
-              menu-class-name="modalfix"
-              v-model="dateDeath"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker"
-                  :model-value="dateDeath != null ? date2Thai(dateDeath) : null"
-                  :label="`${'วันที่เสียชีวิต'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 row q-pa-sm q-col-gutter-sm">
+              <q-file
+                class="col-12 col-sm-6 col-md-5"
+                outlined
+                dense
+                v-model="filePassaway"
+                label="แนบใบมรณบัตร"
+                hide-bottom-space
+                lazy-rules
+              >
+                <q-separator />
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+              <q-input
+                class="col-12 col-sm-6 col-md-7"
+                dense
+                outlined
+                v-model="deathCertificateNo"
+                label="เลขที่ใบมรณบัตร"
+              />
 
-            <q-input
-              class="col-7"
-              dense
-              outlined
-              v-model="placeDeathCertificate"
-              label="สถานที่ออกใบมรณบัตร"
-            />
-            <q-separator />
-            <q-input
-              class="col-12"
-              dense
-              outlined
-              v-model="reasonDeath"
-              label="เหตุผลการเสีบชีวิต"
-              type="textarea"
-            />
-            <q-space />
+              <datepicker
+                class="col-12 col-sm-6 col-md-5"
+                menu-class-name="modalfix"
+                v-model="dateDeath"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      dateDeath != null ? date2Thai(dateDeath) : null
+                    "
+                    :label="`${'วันที่เสียชีวิต'}`"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
+                    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
 
+              <q-input
+                class="col-12 col-sm-6 col-md-7"
+                dense
+                outlined
+                v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร"
+              />
+              <q-separator />
+              <q-input
+                class="col-12"
+                dense
+                outlined
+                v-model="reasonDeath"
+                label="เหตุผลการเสีบชีวิต"
+                type="textarea"
+              />
+            </div>
             <q-space />
           </q-card-section>
           <q-separator />