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