fix: misc firefox-related bug fixes and quirks, including requiring the modal-viewer JS to get further delayed to prevent JS binding issues

Author: sghoweri

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

@@ -12,8 +12,10 @@
   flex-wrap: nowrap;
 
   // IE 11 layout bug
-  .pl-c-body--theme-sidebar & {
-    display: block;
+  @media all and (min-width: $pl-bp-med) {
+    .pl-c-body--theme-sidebar & {
+      display: block;
+    }
   }
 }
 

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

@@ -75,14 +75,8 @@
 
   @media all and (min-width: $pl-bp-med) {
     align-items: center;
-    justify-content: center;
-    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 
-    .pl-c-body--theme-sidebar & {
-      display: block;
-      display: flex;
-    }
   }
 
   @media all and (min-width: $pl-bp-large) {

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

@@ -57,6 +57,11 @@
 
   @media all and (min-width: $pl-bp-med) {
     display: flex; /* 2 */
+
+    // workaround to Firefox-specific flexbox quirk
+    .pl-c-body--theme-sidebar & {
+      display: block;
+    }
   }
 }
 

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

@@ -27,8 +27,6 @@
   overflow: hidden;
   flex-grow: 1;
   transition: height 0.3s ease;
-  transform: translate3d(0, 0, 0);
-  will-change: height;
 
   @supports (position: sticky) {
     top: 0;
@@ -48,9 +46,12 @@
   width: 100%;
   height: 100%;
   display: none;
-  position: absolute;
-  z-index: 20;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 200;
   cursor: move;
+  pointer-events: auto; // Firefox bug fix
 }
 
 /**

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

@@ -10,7 +10,7 @@ pl-toggle-layout {
   cursor: pointer;
 
   @media all and (min-width: $pl-bp-med) {
-    display: inline-flex;
+    display: flex;
   }
 }
 

packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.scss

@@ -2,7 +2,7 @@
 @import '{ .pl-c-tools__action, .pl-c-tools__action-text, .pl-c-tools__action-icon } from ../../../sass/scss/04-components/_tools.scss';
 
 pl-toggle-theme {
-  display: inline-flex;
+  display: flex;
   align-self: center;
   justify-content: center;
   align-items: center;

packages/uikit-workshop/src/scripts/patternlab-viewer.js

@@ -4,15 +4,15 @@ loadPolyfills.then(res => {
   import(/* webpackMode: 'eager', webpackChunkName: 'pl-layout' */ './components/pl-layout/pl-layout').then(
     () => {
       // this ensures that the old-school way the styleguide JS binds to the page isn't thrown off by the <pl-layout> component rendering -- temp workaround till the logic in styleguide.js gets broken down and refactored.
-      import(/* webpackMode: 'eager', webpackChunkName: 'pl-styleguide' */ './components/styleguide');
+      import(/* webpackMode: 'lazy', webpackChunkName: 'pl-styleguide' */ './components/styleguide');
+      import(/* webpackMode: 'lazy', webpackChunkName: 'pl-modal-viewer' */ './components/modal-viewer');
     }
   );
   import(/* webpackMode: 'eager', webpackChunkName: 'pl-toggle-theme' */ './components/pl-toggle-theme/pl-toggle-theme');
   import(/* webpackMode: 'eager', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');
 });
 
 import './components/typeahead';
-import './components/modal-viewer';
 import './components/panels';
 import './components/panels-viewer';
 import './components/pattern-finder';