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

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);