US206196 set z-index: 2000, set max-height, removed min-height, set button outside of scroll.

Author: chrisdo1

elements/pfe-modal/src/pfe-modal.html

@@ -5,11 +5,12 @@
 		<div class="pfe-modal__container">
 			<slot name="pfe-modal--header"></slot>
 			<slot></slot>
-			<button class="pfe-modal__close" aria-label="Close dialog">
-				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="-11 11 22 23">
-					<path d="M30 16.669v-1.331c0-0.363-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-10.669v-10.65c0-0.362-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-1.331c-0.363 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v10.644h-10.675c-0.362 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v1.331c0 0.363 0.131 0.675 0.394 0.938s0.575 0.394 0.938 0.394h10.669v10.644c0 0.363 0.131 0.675 0.394 0.938 0.262 0.262 0.575 0.394 0.938 0.394h1.331c0.363 0 0.675-0.131 0.938-0.394s0.394-0.575 0.394-0.938v-10.637h10.669c0.363 0 0.675-0.131 0.938-0.394 0.269-0.262 0.4-0.575 0.4-0.938z" transform="rotate(45)"/>
-				</svg>
-			</button>
 		</div>
+		<button class="pfe-modal__close" aria-label="Close dialog">
+			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="-11 11 22 23">
+				<path d="M30 16.669v-1.331c0-0.363-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-10.669v-10.65c0-0.362-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-1.331c-0.363 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v10.644h-10.675c-0.362 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v1.331c0 0.363 0.131 0.675 0.394 0.938s0.575 0.394 0.938 0.394h10.669v10.644c0 0.363 0.131 0.675 0.394 0.938 0.262 0.262 0.575 0.394 0.938 0.394h1.331c0.363 0 0.675-0.131 0.938-0.394s0.394-0.575 0.394-0.938v-10.637h10.669c0.363 0 0.675-0.131 0.938-0.394 0.269-0.262 0.4-0.575 0.4-0.938z" transform="rotate(45)"/>
+			</svg>
+		</button>
+
 	</div>
 </section>

elements/pfe-modal/src/pfe-modal.scss

@@ -7,8 +7,8 @@ $pfe-modal--breakpoint--medium: 640px;
 	--pfe-modal--MaxWidth: 70vw;
 	--pfe-modal--MinWidth: 50vw;
 	--pfe-modal--MaxWidth--mobile: 94vw;
-	--pfe-modal--MaxHeight: none;
-	--pfe-modal--MinHeight: 40vh;
+	--pfe-modal--MaxHeight: 90vh;
+	--pfe-modal--MaxHeight--mobile: 80vh;
 	--pfe-modal--Padding--mobile: calc(#{pfe-var(container-padding)} * 1.25) calc(#{pfe-var(container-padding)} * 3) calc(#{pfe-var(container-padding)} * 1.25) calc(#{pfe-var(container-padding)} * 1.25);
 	--pfe-modal--Padding: calc(#{pfe-var(container-padding)} * 2);
 	--pfe-modal__overlay--BackgroundColor: #{pfe-color(overlay)};
@@ -32,7 +32,7 @@ $pfe-modal--breakpoint--medium: 640px;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		z-index: 2;
+		z-index: var(--pfe-z--modal, 2000);
 
 		&[hidden] {
 			display: none;
@@ -53,30 +53,29 @@ $pfe-modal--breakpoint--medium: 640px;
 		}
 	}
 	&__wrapper {
-		z-index: 2;
 		position: relative;
 		max-width: pfe-local(MaxWidth--mobile);
 		min-width: pfe-local(MinWidth);
-		min-height: pfe-local(MinHeight);
 		margin: 0 auto;
 		box-shadow: pfe-var(box-shadow--lg);
 		background-color: pfe-color(surface--lightest);
 		border-radius: #{pfe-var(ui--border-radius)};
-		overflow-y: auto;
-		overscroll-behavior: contain;
 
 		@media screen and (min-width: $pfe-modal--breakpoint--medium) {
 			max-width: pfe-local(MaxWidth);
-			max-height: pfe-local(MaxHeight);	
 		}
 	}
 	&__container {
 		position: relative;
 		padding: var(--pfe-modal--Padding--mobile);
 		max-width: calc(100% - #{pfe-var(ui--element--size)});
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		max-height: pfe-local(MaxHeight--mobile);	
 
 		@media screen and (min-width: $pfe-modal--breakpoint--medium) {
 			padding: pfe-local(Padding);
+			max-height: pfe-local(MaxHeight);
 		}
 
 		&[hidden] {