fix: wrong element positioning and styling

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="col-10 q-pa-md full-height scroll">
-        <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>
-
         <FormInformation
           id="dialog-form-information"
           dense