fix: update viewport CSS to prevent JS from exceeding the maximum size of the page; update to account for vertical vs horizontal layouts

Author: sghoweri

packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss

@@ -53,3 +53,6 @@ $pl-animate-normal: 0.3s;
 // Borders
 $pl-border-radius: 3px;
 $pl-border-radius-med: 6px;
+
+
+$pl-sidebar-width: 14rem; //Define sidebar width for calculating dimensions

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

@@ -24,6 +24,13 @@
   pointer-events: none;
   will-change: height, transform;
   overflow: hidden;
+  max-width: 100vw;
+
+  .pl-c-body--theme-sidebar & {
+    @media all and (min-width: $pl-bp-med) {
+      max-width: calc(100vw - #{$pl-sidebar-width});
+    }
+  }
 
   /**
      * Active modal

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

@@ -86,6 +86,13 @@
   left: 0;
   right: 0;
   background-color: $pl-color-white;
+  max-width: 100vw; // https://github.com/bolt-design-system/bolt/pull/868
+
+  .pl-c-body--theme-sidebar & {
+    @media all and (min-width: $pl-bp-med) {
+      max-width: calc(100vw - #{$pl-sidebar-width} + 14px);
+    }
+  }
 
   /**
     * Hay Mode transition
@@ -141,3 +148,17 @@
 .vp-animate {
   transition: width 0.8s ease-out;
 }
+
+// wrapper so the iframe + modal can switch flex directions in vertical vs horizontal layouts
+.pl-c-viewport-modal-wrapper {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  max-width: calc(100vw);
+  
+  .pl-c-body--theme-sidebar & {
+    @media all and (min-width: $pl-bp-med) {
+      max-width: calc(100vw - #{$pl-sidebar-width});
+    }
+  }
+}