Keep desktop modals open on outside click and allow larger group member lists.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/ui/UiModal.vue

@@ -2,12 +2,23 @@
 import { onUnmounted, watch } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
 
-const props = defineProps<{
-  open: boolean;
-  title: string;
-  /** برای مودال روی مودال (مثل انتخاب مخاطب داخل فرم) */
-  nest?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    open: boolean;
+    title: string;
+    /** برای مودال روی مودال (مثل انتخاب مخاطب داخل فرم) */
+    nest?: boolean;
+    /**
+     * بستن با کلیک روی پس‌زمینه.
+     * پیش‌فرض: فقط موبایل (تمام‌صفحه). در دسکتاپ عمداً بسته نمی‌شود.
+     */
+    closeOnBackdrop?: boolean | 'mobile';
+  }>(),
+  {
+    nest: false,
+    closeOnBackdrop: 'mobile',
+  },
+);
 
 const emit = defineEmits<{
   close: [];
@@ -24,8 +35,17 @@ onUnmounted(() => {
   document.body.style.overflow = '';
 });
 
+function isMobileViewport() {
+  return typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches;
+}
+
 function onBackdrop(event: MouseEvent) {
-  if (event.target === event.currentTarget) emit('close');
+  if (event.target !== event.currentTarget) return;
+  const mode = props.closeOnBackdrop;
+  if (mode === false) return;
+  if (mode === true || (mode === 'mobile' && isMobileViewport())) {
+    emit('close');
+  }
 }
 </script>