Include FromBorderSize & Scrollbars in Frame width. To fit responsive sizes properly.

2022-10-17 19:39:22 +03:00
parent 7eeafdbd31
commit 7201d360ee
6 changed files with 1273 additions and 3114 deletions
@@ -63,8 +63,13 @@ function Responsive(props = {}) {
  }

  function updateController() {
-    const unit = typeof breakpoint === 'string' ? '' : 'px';
-    previewFrame.style.setProperty('--breakpoint', breakpoint + unit);
+    let frameBreakpoint = breakpoint;
+    if (typeof frameBreakpoint !== 'string') {
+      const browserGap = 17; // Scrollbars + Borders
+      frameBreakpoint = (frameBreakpoint + browserGap) + 'px';
+    }
+
+    previewFrame.style.setProperty('--breakpoint', frameBreakpoint);
    previewFrame.classList.add('has-breakpoint');
    window.postMessage('responsiveUpdate');
    window.responsiveState = {mode, breakpoint};