From a428c6f135fd5b032aad08f5407d8ffabdc7d871 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sat, 19 Sep 2026 11:10:16 +0330
Subject: [PATCH] Fix modal body scroll so tall forms like new-person stay
 usable.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/ui/UiModal.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/ui/UiModal.vue b/apps/web/src/components/ui/UiModal.vue
index 1c32e33..5c662ab 100644
--- a/apps/web/src/components/ui/UiModal.vue
+++ b/apps/web/src/components/ui/UiModal.vue
@@ -67,7 +67,8 @@ function onBackdrop(event: MouseEvent) {
 
 .dialog {
   width: min(880px, 100%);
-  max-height: min(88vh, 880px);
+  max-height: min(88dvh, 88vh, 880px);
+  min-height: 0;
   display: flex;
   flex-direction: column;
   background: #fff;
@@ -119,9 +120,10 @@ function onBackdrop(event: MouseEvent) {
 .body {
   flex: 1 1 auto;
   min-height: 0;
+  overflow-x: hidden;
   overflow-y: auto;
-  display: flex;
-  flex-direction: column;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
   padding: 16px;
   box-sizing: border-box;
 }
@@ -130,10 +132,8 @@ function onBackdrop(event: MouseEvent) {
 .body :deep(.page.embedded),
 .body :deep(.product-form-page.embedded),
 .body :deep(.company-form-page.embedded) {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 100%;
+  min-height: 0;
+  max-width: 100%;
 }
 
 .body :deep(.page.embedded > .form),
@@ -141,7 +141,6 @@ function onBackdrop(event: MouseEvent) {
 .body :deep(.crm-page.embedded > .form),
 .body :deep(.crm-page.embedded > form),
 .body :deep(.crm-page.embedded > .crm-form) {
-  flex: 1 1 auto;
   min-height: 0;
 }
 
@@ -209,6 +208,7 @@ function onBackdrop(event: MouseEvent) {
   }
 
   .body {
+    flex: 1 1 0%;
     padding: 16px;
   }