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;

src/components/mobile/MobileDetailSheet.vue

@@ -1,8 +1,9 @@
 <template>
   <BasicActionSheet
     v-model:visible="visibleModel"
-    :title="title"
+    :title="''"
     :showButton="false"
+    :compact="true"
     :drawerHeight="drawerHeight"
   >
     <div v-if="item" class="space-y-3 pb-2">

src/components/mobile/MobileSheetHeader.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="space-y-3">
-    <div class="min-w-0 space-y-1">
-      <div v-if="showTitle" class="text-lg font-700 text-gray-900">
-        <slot name="title">{{ title }}</slot>
+    <div class="flex items-start justify-between gap-2">
+      <div class="min-w-0 flex-1 space-y-1">
+        <div v-if="showTitle" class="text-lg font-700 text-gray-900">
+          <slot name="title">{{ title }}</slot>
+        </div>
+        <div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
+          <slot name="subtitle">{{ subtitle }}</slot>
+        </div>
       </div>
-      <div v-if="$slots.actions" class="flex flex-wrap items-center justify-end gap-2 pt-1">
+      <div
+        v-if="$slots.actions"
+        class="flex shrink-0 flex-wrap items-center justify-end gap-1"
+      >
         <slot name="actions" />
       </div>
-      <div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
-        <slot name="subtitle">{{ subtitle }}</slot>
-      </div>
     </div>
   </div>
 </template>