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

@@ -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;
   }