fix: misc IE 11-specific UI and layout bugs

Author: sghoweri

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

@@ -10,6 +10,11 @@
   margin-left: auto; /* 2 */
   display: flex;
   flex-wrap: nowrap;
+
+  // IE 11 layout bug
+  .pl-c-body--theme-sidebar & {
+    display: block;
+  }
 }
 
 /**

packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss

@@ -70,6 +70,8 @@
   list-style: none;
   margin: 0;
   padding: 0;
+  overflow-x: auto;
+  padding: 0 0.25rem;
 
   @media all and (min-width: $pl-bp-med) {
     align-items: center;
@@ -96,3 +98,12 @@
 .pl-c-size-list__action {
   @include linkStyle();
 }
+
+// Force list items to center align if not overflow scrolling
+.pl-c-size-list__item:first-child {
+  margin-left: auto;
+}
+
+.pl-c-size-list__item:last-child {
+  margin-right: auto;
+}

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

@@ -33,6 +33,10 @@
   @supports (position: sticky) {
     top: 0;
   }
+
+  .pl-c-body--theme-sidebar & {
+    top: 0;
+  }
 }
 
 /**
@@ -159,6 +163,11 @@
   .pl-c-body--theme-sidebar & {
     @media all and (min-width: $pl-bp-med) {
       max-width: calc(100vw - #{$pl-sidebar-width});
+
+      // IE 11 bug causing viewport to be offset
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        margin-left: $pl-sidebar-width;
+      }
     }
   }
 }

packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss

@@ -23,6 +23,7 @@
       padding: 1rem;
       overflow: auto;
       @include hideScrollBar();
+      justify-content: space-between;
     }
 
     /**
@@ -154,7 +155,7 @@
         *    they appear at the bottom
         */
     .pl-c-controls {
-      margin-top: auto; /* 1 */
+      justify-self: flex-end;
       margin-left: 0;
       flex-direction: column;
     }

packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss

@@ -5,6 +5,7 @@ pl-layout {
   flex-direction: column;
   height: 100%;
   background-color: $pl-color-gray-13;
+  overflow: hidden; // Fix for IE 11 layout bug
 
   &.pl-c-body--theme-sidebar {
     @media all and (min-width: $pl-bp-med) {