handle mobile user

src/components/BasicActionSheet.vue

@@ -51,9 +51,9 @@
     :destroy-on-close="true"
     :height="drawerHeight"
     :z-index="ACTION_SHEET_Z_INDEX"
-    class="basic-action-sheet"
+    :class="['basic-action-sheet', { 'basic-action-sheet--compact': compact }]"
   >
-    <div class="basic-action-sheet__container">
+    <div class="basic-action-sheet__container" :class="{ 'basic-action-sheet__container--compact': compact }">
       <div class="flex cursor-pointer justify-center pt-2" @click="visibleProxy = false">
         <span class="w-12 rounded-sm border-t-2 border-t-solid border-t-gray-500"></span>
       </div>
@@ -105,6 +105,7 @@ interface Props {
   modalWidth?: string
   loading?: boolean
   drawerHeight?: string
+  compact?: boolean
   cancelText?: string
   showButton?: boolean
   showCancel?: boolean
@@ -118,6 +119,7 @@ const props = withDefaults(defineProps<Props>(), {
   modalWidth: '36rem',
   loading: false,
   drawerHeight: ACTION_SHEET_HEIGHT,
+  compact: false,
   cancelText: 'بازگشت',
   showButton: false,
   showCancel: true,
@@ -177,6 +179,29 @@ function handleCancel() {
   padding: 0 16px 12px;
 }
 
+.basic-action-sheet--compact {
+  .ant-drawer-content-wrapper {
+    height: auto !important;
+    max-height: 88vh;
+  }
+
+  .ant-drawer-content {
+    height: auto !important;
+    max-height: 88vh;
+  }
+}
+
+.basic-action-sheet__container--compact {
+  height: auto;
+  min-height: 0;
+  max-height: 88vh;
+}
+
+.basic-action-sheet__container--compact .basic-action-sheet__content {
+  flex: 0 1 auto;
+  max-height: calc(88vh - 40px);
+}
+
 .basic-action-sheet__footer {
   position: sticky;
   bottom: 0;