fix(02): profile layout

src/pages/02_personnel-management/MainPage.vue

@@ -1525,7 +1525,12 @@ watch(
     "
   >
     <InfoForm>
-      <div class="q-px-lg q-pt-lg surface-2">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
         <ProfileBanner
           :active="formData.status !== 'INACTIVE'"
           useToggle
@@ -1576,16 +1581,26 @@ watch(
 
       <div
         style="flex: 1; width: 100%; overflow-y: auto"
-        class="surface-2 q-pa-lg"
         id="drawer-user-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
       >
         <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"
+            class="rounded row"
+            :class="{
+              'q-py-md q-px-lg': $q.screen.gt.sm,
+              'q-py-sm q-px-lg': !$q.screen.gt.sm,
+            }"
             style="position: absolute; z-index: 999; top: 0; right: 0"
+          >
+            <div
               v-if="formData.status !== 'INACTIVE'"
+              class="surface-1 row rounded"
             >
               <UndoButton
                 v-if="infoDrawerEdit"
@@ -1629,6 +1644,7 @@ watch(
                 type="button"
               />
             </div>
+          </div>
           <div
             class="col"
             style="height: 100%; overflow-y: auto"
@@ -1672,9 +1688,12 @@ watch(
           </div>
 
           <div
-            class="col-12 col-md-10 q-py-md q-pr-md relative-position"
+            class="col-12 col-md-10 relative-position"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-py-md q-px-lg': !$q.screen.gt.sm,
+            }"
             id="user-form-content"
-            :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
             style="height: 100%; max-height: 100; overflow-y: auto"
           >
             <FormInformation
@@ -1781,7 +1800,12 @@ watch(
   >
     <!-- :title="formData.name"
   :caption="formData.nameEN" -->
-    <div class="q-mx-lg q-mt-lg">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         active
         useToggle
@@ -1823,15 +1847,32 @@ watch(
     </div>
 
     <div
-      class="col surface-1 q-ma-lg rounded bordered row relative-position"
+      class="col"
       id="personnel-form"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
     >
       <div
-        class="surface-1 rounded q-my-md q-mx-lg row"
+        style="overflow-y: auto"
+        class="row full-width full-height surface-1 rounded bordered relative-position"
+      >
+        <div
+          class="rounded row"
           style="position: absolute; z-index: 999; right: 0; top: 0"
+          :class="{
+            'q-py-md q-px-lg': $q.screen.gt.sm,
+            'q-py-sm q-px-lg': !$q.screen.gt.sm,
+          }"
+        >
+          <div
+            v-if="formData.status !== 'INACTIVE'"
+            class="surface-1 row rounded"
           >
             <SaveButton id="btn-info-basic-save" icon-only type="submit" />
           </div>
+        </div>
         <div class="col full-height scroll" v-if="$q.screen.gt.sm">
           <div style="position: sticky; top: 0" class="q-pa-sm">
             <SideMenu
@@ -1869,7 +1910,13 @@ watch(
             />
           </div>
         </div>
-      <div class="col-md-10 col-12 q-pa-md full-height scroll">
+        <div
+          class="col-md-10 col-12 full-height scroll"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-py-md q-px-lg': !$q.screen.gt.sm,
+          }"
+        >
           <FormInformation
             id="dialog-form-information"
             dense
@@ -1947,6 +1994,7 @@ watch(
           />
         </div>
       </div>
+    </div>
   </DialogForm>
 
   <ImageUploadDialog