#1167: Fix zooming in size input when on phone

Author: JosefBredereck

packages/docs/src/docs/advanced-keyboard-shortcuts.md

@@ -15,12 +15,12 @@ Pattern Lab comes with support for a number of special keyboard shortcuts to mak
 
 Modifying the viewport:
 
-- **ctrl+shift+0**: set the viewport to 320px
-- **ctrl+shift+s**: set the viewport to "small"
-- **ctrl+shift+m**: set the viewport to "medium"
-- **ctrl+shift+l**: set the viewport to "large"
-- **ctrl+shift+h**: toggle Hay mode
-- **ctrl+shift+d**: toggle disco mode
+- **ctrl+alt+0**: set the viewport to 320px
+- **ctrl+alt+s**: set the viewport to "small"
+- **ctrl+alt+m**: set the viewport to "medium"
+- **ctrl+alt+l**: set the viewport to "large"
+- **ctrl+alt+h**: toggle Hay mode
+- **ctrl+alt+d**: toggle disco mode
 
 Modifying the views:
 

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

@@ -18,7 +18,12 @@ pl-viewport-size {
 .pl-c-viewport-size {
   margin: 0;
   border: 0;
-  font-size: 0.85rem;
+
+  // Prevent zooming on phone browser when the font size is smaller than 16px
+  // As it would break the visualization the field itself will be scaled to 85% 
+  font-size: 1rem;
+  transform: scale(0.85);
+
   padding: 0.3rem 0.25rem;
   line-height: 1;
   display: flex;
@@ -45,7 +50,7 @@ pl-viewport-size {
 }
 
 .pl-c-viewport-size__input-action {
-  max-width: 40px;
+  max-width: 47px;
   font-size: inherit;
   pointer-events: auto;
 

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

@@ -55,6 +55,7 @@ class IFrame extends BaseLitComponent {
     this.themeMode = state.app.themeMode || 'dark';
     this.isViewallPage = state.app.isViewallPage || false;
     this.currentPattern = state.app.currentPattern || '';
+    this.layoutMode = state.app.layoutMode;
 
     if (state.app.viewportPx) {
       this.sizeiframe(state.app.viewportPx, false);
@@ -312,6 +313,14 @@ class IFrame extends BaseLitComponent {
         this.sizeiframe(this.iframe.clientWidth, false);
       }
     }
+
+    // Update size when layout is changed
+    if (this.layoutMode !== state.app.layoutMode) {
+      this.layoutMode = state.app.layoutMode;
+      if (this.iframeContainer) {
+        this.updateSizeReading(this.iframeContainer.clientWidth);
+      }
+    }
   }
 
   navigateTo(pattern = patternName) {