fix: Drawer info layout

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

@@ -53,59 +53,49 @@ const employeeTab = defineModel<string>('employeeTab');
     </div>
 
     <div
-      class="full-width no-wrap col"
-      :class="$q.screen.gt.xs ? 'row' : 'column'"
+      class="col full-height q-pa-md"
+      :class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
     >
-      <div class="col-3" v-if="$slots['person-card']">
+      <div class="col-md-2" v-if="$slots['person-card']">
         <slot name="person-card"></slot>
       </div>
+
       <div
+        class="bordered surface-1 rounded q-pa-md scroll full-height col"
         :class="{
-          'col-9': $slots['person-card'],
-          'col-12': !$slots['person-card'],
-          'q-ml-md': $q.screen.xs,
+          'q-ml-md': $q.screen.gt.sm && $slots['person-card'],
+          'q-mt-md': $q.screen.lt.md,
         }"
-        class="relative-position"
       >
-        <AppBox
-          bordered
-          :noPadding="noPaddingTab"
-          :class="{
-            'q-my-md q-mr-md': $slots['person-card'],
-            'q-ma-md': !$slots['person-card'],
-          }"
-          style="position: absolute; overflow-y: auto; inset: 0"
-        >
-          <div class="row q-col-gutter-y-md">
-            <slot name="information"></slot>
-            <slot name="person"></slot>
-            <slot name="address" v-if="!noAddress">
-              <FormAddress
-                dense
-                outlined
-                separator
-                prefix-id="default"
-                :employee="employee"
-                :readonly="readonly"
-                :disabledRule="disabledRule"
-                v-model:address="address"
-                v-model:addressEN="addressEN"
-                v-model:provinceId="provinceId"
-                v-model:districtId="districtId"
-                v-model:subDistrictId="subDistrictId"
-                v-model:zipCode="zipCode"
-                v-model:same-with-employer="sameWithEmployer"
-                :title="titleFormAddress"
-                :addressTitle="addressTitle || ''"
-                :addressTitleEN="addressTitleEN || ''"
-                v-if="!$slots.address"
-              />
-            </slot>
-            <slot name="qr-code"></slot>
-            <slot name="location"></slot>
-            <slot name="by-type"></slot>
-          </div>
-        </AppBox>
+        <div class="row q-col-gutter-y-md">
+          <slot name="information"></slot>
+          <slot name="person"></slot>
+          <slot name="address" v-if="!noAddress">
+            <FormAddress
+              dense
+              outlined
+              separator
+              prefix-id="default"
+              :employee="employee"
+              :readonly="readonly"
+              :disabledRule="disabledRule"
+              v-model:address="address"
+              v-model:addressEN="addressEN"
+              v-model:provinceId="provinceId"
+              v-model:districtId="districtId"
+              v-model:subDistrictId="subDistrictId"
+              v-model:zipCode="zipCode"
+              v-model:same-with-employer="sameWithEmployer"
+              :title="titleFormAddress"
+              :addressTitle="addressTitle || ''"
+              :addressTitleEN="addressTitleEN || ''"
+              v-if="!$slots.address"
+            />
+          </slot>
+          <slot name="qr-code"></slot>
+          <slot name="location"></slot>
+          <slot name="by-type"></slot>
+        </div>
       </div>
     </div>
   </div>
@@ -126,6 +116,5 @@ const employeeTab = defineModel<string>('employeeTab');
 .content-tab {
   border-top-left-radius: var(--radius-2);
   border-top-right-radius: var(--radius-2);
-  position: relative;
 }
 </style>

src/components/DrawerInfo.vue

@@ -43,17 +43,7 @@ function reset() {
     no-swipe-open
     @before-hide="reset"
     @hide="close"
-    :width="
-      $q.screen.gt.xs
-        ? $q.screen.gt.sm
-          ? $q.screen.gt.md
-            ? $q.screen.gt.lg
-              ? 1400
-              : 1200
-            : 1000
-          : 700
-        : windowSize
-    "
+    :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
     v-model="drawerOpen"
     behavior="mobile"
     side="right"
@@ -70,7 +60,8 @@ function reset() {
         class="column justify-between full-height"
         style="padding: 0; border-radius: var(--radius-2)"
       >
-        <div class="form-header col q-px-lg row items-center">
+        <!-- header -->
+        <div class="bordered-b q-pa-lg row items-center">
           <div v-if="showEdit">
             <div v-if="isEdit" class="row">
               <q-btn
@@ -154,17 +145,18 @@ function reset() {
           />
         </div>
 
+        <!-- body -->
         <div
-          class="col-10 form-body full-width"
-          style="position: relative"
+          class="col form-body full-width"
           :class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`"
         >
           <slot></slot>
           <slot name="info"></slot>
         </div>
 
+        <!-- footer -->
         <div
-          class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
+          class="bordered-t q-pr-lg row items-center justify-end q-gutter-x-lg q-py-md"
         >
           <q-btn
             v-if="isEdit"
@@ -214,10 +206,6 @@ function reset() {
   }
 }
 
-.form-header {
-  border-bottom: 1px solid var(--border-color);
-}
-
 .form-body {
   --_body-bg: var(--sand-0);
   background-color: var(--_body-bg);
@@ -228,10 +216,6 @@ function reset() {
   }
 }
 
-.form-footer {
-  border-top: 1px solid var(--border-color);
-}
-
 .branch-badge {
   --_branch-badge-fg: var(--green-8-hsl);
   --_branch-badge-bg: var(--green-6-hsl);