Fixed Responsive Sizes issues - 414px is not really 414 because of scrollbars.

layouts/scripts/dist/index.min.js

@@ -9486,8 +9486,7 @@ function Responsive(props = {}) {
   function updateController() {
     let frameBreakpoint = breakpoint;
     if (typeof frameBreakpoint !== 'string') {
-      const browserGap = 17; // Scrollbars + Borders
-      frameBreakpoint = frameBreakpoint + browserGap + 'px';
+      frameBreakpoint = frameBreakpoint + 'px';
     }
     previewFrame.style.setProperty('--breakpoint', frameBreakpoint);
     previewFrame.classList.add('has-breakpoint');
@@ -9687,10 +9686,10 @@ const PreviewButtonStyle = qe.button`
 `;
 const PreviewStyle = qe.div`
   position: fixed;
-  top: 3rem;
+  top: calc(var(--top_panel_height) - 2px);
   bottom: 0;
   left: 0;
-  right: 0;
+  right: 14px; // Scrollbars
 
   background-color: rgba(0, 0, 0, 0.1);
   display: flex;
@@ -9857,7 +9856,8 @@ function DesignPreview({
     if (!previewOption) {
       return 0;
     }
-    return window.innerWidth / 2 - previewOption.widthDimension / 2;
+    const scrollbarOffset = 7;
+    return window.innerWidth / 2 - previewOption.widthDimension / 2 - scrollbarOffset;
   }
   function responsiveModeChangesHandler(e) {
     if (e.data !== 'responsiveUpdate') {
@@ -10000,10 +10000,19 @@ function setupDataOptions(rootAttributes) {
   root.render(html);
 }
 
+const previewFrame = document.getElementById('preview_frame');
 const rootAttributes = {
-  previewFrame: document.getElementById('preview_frame')
+  previewFrame
 };
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
 setupPublish(rootAttributes);
+window.addEventListener('message', function (e) {
+  const RESIZE_CODE = 'resize:';
+  if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
+    return;
+  }
+  const data = JSON.parse(e.data.substring(RESIZE_CODE.length));
+  previewFrame.style.height = data.height + 'px';
+});
 //# sourceMappingURL=index.min.js.map

layouts/scripts/frame-index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+setupResizeListener();
+
+///
+
+function setupResizeListener() {
+  const RESIZE_CODE = 'resize:';
+
+  const resizeObserver = new ResizeObserver(entries => {
+    const height = document.body.offsetHeight;
+    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
+  })
+
+  resizeObserver.observe(document.body);
+}

layouts/scripts/index.js

@@ -4,10 +4,21 @@ import {setupResponsiveness} from './toolbar/responsive.jsx';
 import {setupPublish} from "./toolbar/publish.jsx";
 import {setupDataOptions} from "./toolbar/data-options/DataOptions.jsx";
 
+const previewFrame = document.getElementById('preview_frame');
 const rootAttributes = {
-  previewFrame: document.getElementById('preview_frame'),
+  previewFrame,
 }
 
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
 setupPublish(rootAttributes)
+
+window.addEventListener('message', function (e) {
+  const RESIZE_CODE = 'resize:';
+  if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
+    return;
+  }
+
+  const data = JSON.parse(e.data.substring(RESIZE_CODE.length))
+  previewFrame.style.height = data.height + 'px';
+});

layouts/scripts/toolbar/data-options/DesignPreview.jsx

@@ -130,7 +130,8 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
       return 0;
     }
 
-    return window.innerWidth / 2 - previewOption.widthDimension / 2;
+    const scrollbarOffset = 7;
+    return window.innerWidth / 2 - previewOption.widthDimension / 2 - scrollbarOffset;
   }
 
   function responsiveModeChangesHandler(e) {

layouts/scripts/toolbar/data-options/design-preview.style.js

@@ -30,10 +30,10 @@ export const PreviewButtonStyle = styled.button`
 
 export const PreviewStyle = styled.div`
   position: fixed;
-  top: 3rem;
+  top: calc(var(--top_panel_height) - 2px);
   bottom: 0;
   left: 0;
-  right: 0;
+  right: 14px; // Scrollbars
 
   background-color: rgba(0, 0, 0, 0.1);
   display: flex;

layouts/scripts/toolbar/responsive.jsx

@@ -65,8 +65,7 @@ function Responsive(props = {}) {
   function updateController() {
     let frameBreakpoint = breakpoint;
     if (typeof frameBreakpoint !== 'string') {
-      const browserGap = 17; // Scrollbars + Borders
-      frameBreakpoint = (frameBreakpoint + browserGap) + 'px';
+      frameBreakpoint = frameBreakpoint + 'px';
     }
 
     previewFrame.style.setProperty('--breakpoint', frameBreakpoint);