US206196 removed max height for modal window, set modal window to position: absolute

Author: chrisdo1

elements/pfe-modal/demo/index.html

@@ -22,7 +22,7 @@ <h1>&lt;pfe-modal&gt;</h1>
       <h2>Modal: Standard modal</h2>
       <pfe-modal>
         <button slot="pfe-modal--trigger">Open modal</button>
-        <h2 slot="pfe-modal--header">Modal with a header with a super duper long title so that we can see what it looks like</h2>
+        <h2 slot="pfe-modal--header">Modal with a header</h2>
         <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <pfe-cta>
           <a href="#bar">Learn more</a>
@@ -52,6 +52,21 @@ <h2 slot="pfe-modal--header">Custom open modal</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </pfe-modal>
     </section>
+    <section>
+      <h2>Modal: a lot of content</h2>
+      <pfe-modal>
+        <button slot="pfe-modal--trigger">Open modal</button>
+        <h2 slot="pfe-modal--header">Modal with a header with a super duper long title and a lot of content</h2>
+        <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
+        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <pfe-cta>
+          <a href="#bar">Learn more</a>
+        </pfe-cta>
+      </pfe-modal>
+
+    </section>
 
     <script>
       document.querySelector("#custom-trigger").addEventListener("click", event => {

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

@@ -7,7 +7,7 @@ $pfe-modal--breakpoint--medium: 640px;
 	--pfe-modal--MaxWidth: 70vw;
 	--pfe-modal--MinWidth: 50vw;
 	--pfe-modal--MaxWidth--mobile: 94vw;
-	--pfe-modal--MaxHeight: 70vh;
+	--pfe-modal--MaxHeight: none;
 	--pfe-modal--MinHeight: 40vh;
 	--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);
@@ -25,17 +25,12 @@ $pfe-modal--breakpoint--medium: 640px;
 	width: 90%;
 }
 
-// ::slotted(*) {
-// 	margin-top: 0;
-//   display: block;
-//   background-color: green;
-// }
-
 .pfe-modal {
 	&__wrapper {
-		position: fixed;
+		position: absolute;
 		z-index: 2;
 		top: calc(#{pfe-local(MaxHeight)} - 50vh);
+		top: 10%;
 		left: 0;
 		right: 0;
 		max-width: pfe-local(MaxWidth--mobile);