refactor: refactor and simplify modal UI + squash cross browser layout bugs

Author: bolt-bot

packages/uikit-workshop/src/html/partials/modal.html

@@ -3,14 +3,18 @@
     <div class="pl-c-modal__toolbar">
         <div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
         <div class="pl-c-modal__toolbar-controls">
+            <!-- @todo: revisit to see if slotted content might make sense here (ex. to have an extra toggle for switching the layout -->
+            <pl-toggle-layout></pl-toggle-layout>
+            
             <button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
                 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
                     <title>Close</title>
                     <path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
                 </svg>
             </button>
-            <pl-toggle-layout></pl-toggle-layout>
         </div>
     </div>
-    <div class="pl-c-modal__content pl-js-modal-content"></div>
+    <div class="pl-c-modal__content-wrapper">
+        <div class="pl-c-modal__content pl-js-modal-content"></div>
+    </div>
 </div>

packages/uikit-workshop/src/sass/scss/04-components/_modal.scss

@@ -2,10 +2,13 @@
     #MODAL
 \*------------------------------------*/
 
+$pl-resizer-height: 14px;
+
 pl-modal {
   display: flex;
   flex-direction: column;
   position: relative;
+  position: sticky;
   z-index: 20;
   max-height: 100vh;
   box-shadow: 0 0 2px 0 $pl-color-gray-70;
@@ -23,10 +26,11 @@ pl-modal {
   font-family: $pl-font;
   background-color: $pl-color-gray-87;
   color: $pl-color-gray-20;
-  position: relative;
+  position: sticky;
   top: auto;
   bottom: 0;
   left: 0;
+  right: 0;
   z-index: 5;
   width: 100%;
   height: 0;
@@ -36,6 +40,7 @@ pl-modal {
   will-change: height, transform;
   overflow: hidden;
   max-width: 100vw;
+  box-shadow: 0 -1px 2px rgba($pl-color-gray-70, 0.1);
 
   .pl-c-body--theme-sidebar & {
     @media all and (min-width: $pl-bp-med) {
@@ -48,7 +53,7 @@ pl-modal {
      */
   &.pl-is-active {
     transform: translate3d(0, 0, 0);
-    height: 50vh; // default height unless manually resized
+    height: 40vh; // default height unless manually resized
     transition: transform 0.3s ease;
     pointer-events: auto;
   }
@@ -62,15 +67,33 @@ pl-modal {
   height: 100%;
 }
 
+.pl-c-modal__content {
+  flex-grow: 1;
+  display: flex;
+  width: 100%;
+  overflow: hidden; // needed for IE 11 so scrollbars show up
+}
+
 .pl-c-modal__toolbar {
   display: flex;
+  flex-direction: column;
+  flex-shrink: 0; // so that the resizer height doesn't change unexpectedly
+}
+
+.pl-c-modal__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden; // needed for IE 11 so scrollbars show up
 }
 
 .pl-c-modal__toolbar-controls {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-self: flex-end;
   position: relative;
   z-index: 10;
+  flex-shrink: 0;
 }
 
 /**
@@ -79,6 +102,9 @@ pl-modal {
  */
 .pl-c-modal__close-btn {
   @include linkStyle;
+  margin: 0;
+  -webkit-appearance: none;
+  flex-shrink: 0; // needed for IE 11
 
   @media all and (max-width: $pl-bp-med - 1) {
     border-radius: 20rem;
@@ -114,10 +140,14 @@ pl-modal {
 
 .pl-c-modal__resizer {
   display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
   align-items: center;
   justify-content: center;
   left: 0;
-  height: 14px;
+  height: $pl-resizer-height;
   width: 100%;
   background-color: inherit;
   z-index: 2;
@@ -133,6 +163,7 @@ pl-modal {
     opacity: 0.5;
     background-color: currentColor;
     border-radius: 3px;
+    display: block;
   }
 
   &:hover:after {
@@ -155,6 +186,8 @@ pl-modal {
   color: currentColor;
   fill: currentColor;
   transition: fill $pl-animate-quick ease-out;
+  flex-shrink: 0; // needed for IE 11
+  align-self: center; // valign in IE 11
 }
 
 .pl-c-code-copy-btn {