Merge pull request #1132 from pattern-lab/feature/hide-resizer-when-full-screen

Update Pattern Lab's iframe resizer UI to be hidden when iframe is full width

Author: bmuenzenmeyer

packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.js

@@ -48,15 +48,15 @@ class ViewportSize extends BaseLitComponent {
 
   updated() {
     if (this.viewport && this.viewport.bodySize) {
-      this.em = Math.floor(this.px - 40 * this.bodySize);
+      this.em = Math.floor(this.px * this.bodySize);
     }
   }
 
   render() {
     if (!window.__PRERENDER_INJECTED) {
       return html`
         <form class="pl-c-viewport-size" method="post" action="#">
-          <span class="pl-c-viewport-size__input">${this.px - 40}px</span
+          <span class="pl-c-viewport-size__input">${this.px}px</span
           >&nbsp;/&nbsp;
           <span class="pl-c-viewport-size__input">${this.em}em</span>
         </form>

packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss

@@ -82,8 +82,8 @@ pl-iframe {
   min-width: 240px;
   max-width: 100vw;
   background: $pl-viewport-bg;
-  padding-right: $pl-resizer-width;
-  padding-left: $pl-resizer-width;
+  padding-right: 0;
+  padding-left: 0;
   // box-shadow: 0 3px 6px rgba(21,22,25,.16), 0 3px 6px rgba(21,22,25,.23);
 
   &.hay-mode {
@@ -153,7 +153,7 @@ pl-iframe {
 .pl-c-viewport__resizer {
   position: absolute;
   width: $pl-resizer-width;
-  right: 0;
+  right: $pl-resizer-width * -1;
   top: 0;
   bottom: 0;
   margin: 0;