feat(@clayui/css): Modals should grow to fit content

- Maxes out at browser window height and overflows modal-body content
liferay · Jul 28, 2023 · 6df4597 · 6df4597
1 parent 55f8b72
commit 6df4597
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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,