From 6df459759639f8f68950a6227759f276d2752d4a Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Wed, 26 Jul 2023 13:59:38 -0700 Subject: [PATCH] feat(@clayui/css): Modals should grow to fit content - Maxes out at browser window height and overflows modal-body content --- packages/clay-css/src/scss/cadmin/variables/_modals.scss | 5 ++++- packages/clay-css/src/scss/variables/_modals.scss | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/clay-css/src/scss/cadmin/variables/_modals.scss b/packages/clay-css/src/scss/cadmin/variables/_modals.scss index 8054420a4e..78f4af66e1 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_modals.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_modals.scss @@ -58,6 +58,7 @@ $cadmin-modal-content: map-deep-merge( color: $cadmin-modal-content-color, display: flex, flex-direction: column, + max-height: calc(100vh - #{$cadmin-modal-dialog-margin-y-sm-up} * 2), outline: 0, overflow: hidden, pointer-events: auto, @@ -124,10 +125,12 @@ $cadmin-modal-body: map-deep-merge( flex-grow: 1, flex-shrink: 1, margin-top: math-sign($cadmin-modal-content-border-width), + overflow: auto, + overflow-wrap: break-word, padding: $cadmin-modal-inner-padding, position: relative, '&.inline-scroller': ( - max-height: 320px, + max-height: none, -webkit-overflow-scrolling: touch, overflow: auto, padding: $cadmin-modal-inner-padding, diff --git a/packages/clay-css/src/scss/variables/_modals.scss b/packages/clay-css/src/scss/variables/_modals.scss index 8323cf07ef..61a0b8c1de 100644 --- a/packages/clay-css/src/scss/variables/_modals.scss +++ b/packages/clay-css/src/scss/variables/_modals.scss @@ -57,6 +57,7 @@ $modal-content: map-deep-merge( color: $modal-content-color, display: flex, flex-direction: column, + max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up} * 2), outline: 0, overflow: hidden, pointer-events: auto, @@ -123,10 +124,12 @@ $modal-body: map-deep-merge( flex-grow: 1, flex-shrink: 1, margin-top: math-sign($modal-content-border-width), + overflow: auto, + overflow-wrap: break-word, padding: $modal-inner-padding, position: relative, '&.inline-scroller': ( - max-height: 320px, + max-height: none, -webkit-overflow-scrolling: touch, overflow: auto, padding: $modal-inner-padding,