From 90b6cc87eff1b3dd22ef70cede04fe5eb180974f Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Mon, 19 Aug 2024 15:50:41 +0700
Subject: [PATCH] fix: wrong element positioning and styling

---
 .../02_personnel-management/MainPage.vue      | 108 +++++++++---------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 193745a2..2e5e1c66 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1647,7 +1647,50 @@ watch(
         class="surface-2 q-pa-lg"
         id="drawer-user-form"
       >
-        <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col surface-1 full-height rounded bordered scroll row relative-position"
+        >
+          <div
+            class="surface-1 rounded q-my-md q-mx-lg row"
+            style="position: absolute; z-index: 999; top: 0; right: 0"
+          >
+            <UndoButton
+              v-if="infoDrawerEdit"
+              id="btn-info-basic-undo"
+              icon-only
+              @click="
+                () => {
+                  undo();
+                }
+              "
+              type="button"
+            />
+            <SaveButton
+              v-if="infoDrawerEdit"
+              id="btn-info-basic-save"
+              icon-only
+              type="submit"
+            />
+            <EditButton
+              v-if="!infoDrawerEdit"
+              id="btn-info-basic-edit"
+              icon-only
+              @click="
+                () => {
+                  infoDrawerEdit = true;
+                  isImageEdit = true;
+                }
+              "
+              type="button"
+            />
+            <DeleteButton
+              v-if="!infoDrawerEdit"
+              id="btn-info-basic-delete"
+              icon-only
+              @click="() => onDelete(infoPersonId)"
+              type="button"
+            />
+          </div>
           <div
             class="col"
             style="height: 100%; max-height: 100; overflow-y: auto"
@@ -1691,52 +1734,10 @@ watch(
           </div>
 
           <div
-            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm relative-position"
             id="user-form-content"
             style="height: 100%; max-height: 100; overflow-y: auto"
           >
-            <div
-              class="surface-1 rounded q-pt-sm row"
-              style="position: absolute; z-index: 999; right: 4%"
-            >
-              <UndoButton
-                v-if="infoDrawerEdit"
-                id="btn-info-basic-undo"
-                icon-only
-                @click="
-                  () => {
-                    undo();
-                  }
-                "
-                type="button"
-              />
-              <SaveButton
-                v-if="infoDrawerEdit"
-                id="btn-info-basic-save"
-                icon-only
-                type="submit"
-              />
-              <EditButton
-                v-if="!infoDrawerEdit"
-                id="btn-info-basic-edit"
-                icon-only
-                @click="
-                  () => {
-                    infoDrawerEdit = true;
-                    isImageEdit = true;
-                  }
-                "
-                type="button"
-              />
-              <DeleteButton
-                v-if="!infoDrawerEdit"
-                id="btn-info-basic-delete"
-                icon-only
-                @click="() => onDelete(infoPersonId)"
-                type="button"
-              />
-            </div>
-
             <FormInformation
               id="info-information"
               v-model:hq-id="hqId"
@@ -1868,10 +1869,16 @@ watch(
     </template> -->
 
     <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row"
+      class="col surface-1 q-ma-lg rounded bordered row relative-position"
       id="personnel-form"
     >
-      <div class="col">
+      <div
+        class="surface-1 rounded q-my-md q-mx-lg row"
+        style="position: absolute; z-index: 999; right: 0; top: 0"
+      >
+        <SaveButton id="btn-info-basic-save" icon-only type="submit" />
+      </div>
+      <div class="col full-height scroll">
         <div style="position: sticky; top: 0" class="q-pa-sm">
           <SideMenu
             :menu="
@@ -1908,14 +1915,7 @@ watch(
           />
         </div>
       </div>
-      <div class="col-10 q-pa-md">
-        <div
-          class="surface-1 rounded q-pt-sm row"
-          style="position: absolute; z-index: 999; right: 4%"
-        >
-          <SaveButton id="btn-info-basic-save" icon-only type="submit" />
-        </div>
-
+      <div class="col-10 q-pa-md full-height scroll">
         <FormInformation
           id="dialog-form-information"
           dense