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>