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