From 5de42b2d0232276500709b667a47e41ed7c1c0fc Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Thu, 12 Dec 2024 17:09:51 +0700
Subject: [PATCH] fix: Ensure outline stays within canvas bounds (#4570)

## Description

Playground


https://p-183a0702-0620-49ac-84b6-066dbce1d300-dot-fix-outline.development.webstudio.is/


<img width="1229" alt="image"
src="https://github.com/user-attachments/assets/5c6a8c73-70e6-48af-8cbd-6c12144d55ee"
/>

todo:
- [x] - fix if horizontal scroll
<img width="629" alt="image"
src="https://github.com/user-attachments/assets/d904d7ac-f74a-4116-993f-00b8b14c39dd"
/>

- [x] - fix if vertical

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../features/workspace/canvas-iframe.tsx      | 10 ++-
 .../workspace/canvas-tools/canvas-tools.tsx   |  9 ++-
 .../canvas-tools/outline/apply-scale.ts       |  8 +-
 .../outline/block-instance-outline.tsx        |  9 ++-
 .../collaborative-instance-outline.tsx        | 17 ++++-
 .../outline/hovered-instance-outline.tsx      | 11 ++-
 .../canvas-tools/outline/outline.stories.tsx  | 75 +++++++++++++++++--
 .../canvas-tools/outline/outline.tsx          | 56 +++++++++++++-
 .../outline/selected-instance-outline.tsx     |  9 ++-
 .../app/builder/shared/nano-states/index.ts   | 41 ++++++++++
 apps/builder/app/canvas/canvas.tsx            |  3 +
 apps/builder/app/canvas/scrollbar-width.ts    | 28 +++++++
 apps/builder/app/shared/sync/sync-stores.ts   |  2 +
 13 files changed, 251 insertions(+), 27 deletions(-)
 create mode 100644 apps/builder/app/canvas/scrollbar-width.ts

diff --git a/apps/builder/app/builder/features/workspace/canvas-iframe.tsx b/apps/builder/app/builder/features/workspace/canvas-iframe.tsx
index 3b0b770b937e..1b140b6ef24f 100644
--- a/apps/builder/app/builder/features/workspace/canvas-iframe.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-iframe.tsx
@@ -45,7 +45,15 @@ const CanvasRectUpdater = ({
       }
 
       const rect = iframeRef.current.getBoundingClientRect();
-      $canvasRect.set(rect);
+
+      $canvasRect.set(
+        new DOMRect(
+          Math.round(rect.x),
+          Math.round(rect.y),
+          Math.round(rect.width),
+          Math.round(rect.height)
+        )
+      );
     };
 
     setUpdateCallback(() => task);
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx
index 33762b22af9a..f855015c6141 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx
@@ -17,7 +17,7 @@ import { Label } from "./outline/label";
 import { Outline } from "./outline/outline";
 import { useSubscribeDragAndDropState } from "./use-subscribe-drag-drop-state";
 import { applyScale } from "./outline";
-import { $scale } from "~/builder/shared/nano-states";
+import { $clampingRect, $scale } from "~/builder/shared/nano-states";
 import { BlockChildHoveredInstanceOutline } from "./outline/block-instance-outline";
 
 const containerStyle = css({
@@ -41,11 +41,16 @@ export const CanvasTools = () => {
   const dragAndDropState = useStore($dragAndDropState);
   const instances = useStore($instances);
   const scale = useStore($scale);
+  const clampingRect = useStore($clampingRect);
 
   if (!canvasToolsVisible) {
     return;
   }
 
+  if (clampingRect === undefined) {
+    return;
+  }
+
   if (dragAndDropState.isDragging) {
     if (dragAndDropState.placementIndicator === undefined) {
       return;
@@ -59,7 +64,7 @@ export const CanvasTools = () => {
 
     return dropTargetInstance ? (
       <div className={containerStyle({ overflow: "hidden" })}>
-        <Outline rect={rect}>
+        <Outline rect={rect} clampingRect={clampingRect}>
           <Label instance={dropTargetInstance} instanceRect={rect} />
         </Outline>
         {placementIndicator !== undefined && (
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/apply-scale.ts b/apps/builder/app/builder/features/workspace/canvas-tools/outline/apply-scale.ts
index 6f11188a161f..10ddbcbf4743 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/apply-scale.ts
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/apply-scale.ts
@@ -4,9 +4,9 @@ export const applyScale = (rect: Rect, scale: number = 1) => {
   // Calculate in the "scale" that is applied to the canvas
   const scaleFactor = scale / 100;
   return {
-    top: rect.top * scaleFactor,
-    left: rect.left * scaleFactor,
-    width: rect.width * scaleFactor,
-    height: rect.height * scaleFactor,
+    top: Math.round(rect.top * scaleFactor),
+    left: Math.round(rect.left * scaleFactor),
+    width: Math.round(rect.width * scaleFactor),
+    height: Math.round(rect.height * scaleFactor),
   };
 };
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/block-instance-outline.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/block-instance-outline.tsx
index 5164d5f65379..aca03db013c0 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/block-instance-outline.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/block-instance-outline.tsx
@@ -30,7 +30,7 @@ import {
 } from "@webstudio-is/design-system";
 import { Outline } from "./outline";
 import { applyScale } from "./apply-scale";
-import { $scale } from "~/builder/shared/nano-states";
+import { $clampingRect, $scale } from "~/builder/shared/nano-states";
 import { PlusIcon, TrashIcon } from "@webstudio-is/icons";
 import { BoxIcon } from "@webstudio-is/icons/svg";
 import { useRef, useState } from "react";
@@ -342,6 +342,7 @@ export const BlockChildHoveredInstanceOutline = () => {
   const isContentMode = useStore($isContentMode);
   const modifierKeys = useStore($modifierKeys);
   const instances = useStore($instances);
+  const clampingRect = useStore($clampingRect);
 
   const timeoutRef = useRef<undefined | ReturnType<typeof setTimeout>>(
     undefined
@@ -366,6 +367,10 @@ export const BlockChildHoveredInstanceOutline = () => {
     return;
   }
 
+  if (clampingRect === undefined) {
+    return;
+  }
+
   const blockInstanceSelector = findBlockSelector(outline.selector, instances);
 
   if (blockInstanceSelector === undefined) {
@@ -412,7 +417,7 @@ export const BlockChildHoveredInstanceOutline = () => {
   );
 
   return (
-    <Outline rect={rect}>
+    <Outline rect={rect} clampingRect={clampingRect}>
       <div
         style={{
           width: 0,
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/collaborative-instance-outline.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/collaborative-instance-outline.tsx
index a945707b15d5..731181a64845 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/collaborative-instance-outline.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/collaborative-instance-outline.tsx
@@ -2,7 +2,7 @@ import { useStore } from "@nanostores/react";
 import { $collaborativeInstanceRect } from "~/shared/nano-states";
 import { Outline } from "./outline";
 import { applyScale } from "./apply-scale";
-import { $scale } from "~/builder/shared/nano-states";
+import { $scale, $clampingRect } from "~/builder/shared/nano-states";
 import { $ephemeralStyles } from "~/canvas/stores";
 
 // Outline of an instance that is being edited by AI or a human collaborator.
@@ -10,12 +10,23 @@ export const CollaborativeInstanceOutline = () => {
   const scale = useStore($scale);
   const instanceRect = useStore($collaborativeInstanceRect);
   const ephemeralStyles = useStore($ephemeralStyles);
+  const clampingRect = useStore($clampingRect);
 
-  if (instanceRect === undefined || ephemeralStyles.length !== 0) {
+  if (
+    instanceRect === undefined ||
+    ephemeralStyles.length !== 0 ||
+    clampingRect === undefined
+  ) {
     return;
   }
 
   const rect = applyScale(instanceRect, scale);
 
-  return <Outline variant="collaboration" rect={rect}></Outline>;
+  return (
+    <Outline
+      variant="collaboration"
+      rect={rect}
+      clampingRect={clampingRect}
+    ></Outline>
+  );
 };
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx
index 804463a27a3c..34dece26756e 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx
@@ -10,7 +10,7 @@ import {
 import { Outline } from "./outline";
 import { Label } from "./label";
 import { applyScale } from "./apply-scale";
-import { $scale } from "~/builder/shared/nano-states";
+import { $clampingRect, $scale } from "~/builder/shared/nano-states";
 import { findClosestSlot } from "~/shared/instance-utils";
 import { shallowEqual } from "shallow-equal";
 import type { InstanceSelector } from "~/shared/tree-utils";
@@ -31,8 +31,13 @@ export const HoveredInstanceOutline = () => {
   const scale = useStore($scale);
   const textEditingInstanceSelector = useStore($textEditingInstanceSelector);
   const isContentMode = useStore($isContentMode);
+  const clampingRect = useStore($clampingRect);
 
-  if (outline === undefined || hoveredInstanceSelector === undefined) {
+  if (
+    outline === undefined ||
+    hoveredInstanceSelector === undefined ||
+    clampingRect === undefined
+  ) {
     return;
   }
 
@@ -58,7 +63,7 @@ export const HoveredInstanceOutline = () => {
   const rect = applyScale(outline.rect, scale);
 
   return (
-    <Outline rect={rect} variant={variant}>
+    <Outline rect={rect} clampingRect={clampingRect} variant={variant}>
       <Label
         variant={variant}
         instance={outline.instance}
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.stories.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.stories.tsx
index 7e98a6b1f952..8e4cfc34b44e 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.stories.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.stories.tsx
@@ -13,7 +13,10 @@ export const Basic = () => (
       <Box css={{ width: "min-content", textAlign: "center" }}>
         Selected outline
       </Box>
-      <Outline rect={new DOMRect(0, 0, 150, 150)} />
+      <Outline
+        rect={new DOMRect(0, 0, 150, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+      />
     </Grid>
 
     <Flex
@@ -24,7 +27,11 @@ export const Basic = () => (
       <Box css={{ width: "min-content", textAlign: "center" }}>
         Collaboration outline
       </Box>
-      <Outline rect={new DOMRect(0, 0, 150, 150)} variant="collaboration" />
+      <Outline
+        rect={new DOMRect(0, 0, 150, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+        variant="collaboration"
+      />
     </Flex>
 
     <Flex
@@ -35,8 +42,15 @@ export const Basic = () => (
       <Box css={{ width: "min-content", textAlign: "center" }}>
         Collaboration outline over Selected
       </Box>
-      <Outline rect={new DOMRect(0, 0, 150, 150)} />
-      <Outline rect={new DOMRect(0, 0, 150, 150)} variant="collaboration" />
+      <Outline
+        rect={new DOMRect(0, 0, 150, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+      />
+      <Outline
+        rect={new DOMRect(0, 0, 150, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+        variant="collaboration"
+      />
     </Flex>
 
     <Flex
@@ -47,8 +61,57 @@ export const Basic = () => (
       <Box css={{ width: "min-content", textAlign: "center" }}>
         Selected outline over Collaboration
       </Box>
-      <Outline rect={new DOMRect(0, 0, 150, 150)} variant="collaboration" />
-      <Outline rect={new DOMRect(0, 0, 150, 150)} />
+      <Outline
+        rect={new DOMRect(0, 0, 150, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+        variant="collaboration"
+      />
+      <Outline
+        rect={new DOMRect(0, 0, 150, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+      />
+    </Flex>
+
+    <Flex
+      align="center"
+      justify="center"
+      css={{ position: "relative", height: 150, width: 150 }}
+    >
+      <Box css={{ width: "min-content", textAlign: "center" }}>
+        Clamped left
+      </Box>
+      <Outline
+        rect={new DOMRect(-10, 0, 150, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+      />
+    </Flex>
+
+    <Flex
+      align="center"
+      justify="center"
+      css={{ position: "relative", height: 150, width: 150 }}
+    >
+      <Box css={{ width: "min-content", textAlign: "center" }}>
+        Clamped right
+      </Box>
+      <Outline
+        rect={new DOMRect(0, 0, 160, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+      />
+    </Flex>
+
+    <Flex
+      align="center"
+      justify="center"
+      css={{ position: "relative", height: 150, width: 150 }}
+    >
+      <Box css={{ width: "min-content", textAlign: "center" }}>
+        Clamped left-right
+      </Box>
+      <Outline
+        rect={new DOMRect(-10, 0, 170, 150)}
+        clampingRect={new DOMRect(0, 0, 150, 150)}
+      />
     </Flex>
   </Grid>
 );
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
index 9c74bef98c47..105c6f985f9d 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx
@@ -40,6 +40,27 @@ const baseOutlineStyle = css({
         borderColor: theme.colors.foregroundReusable,
       },
     },
+
+    isLeftClamped: {
+      true: {
+        borderLeftWidth: 0,
+      },
+    },
+    isRightClamped: {
+      true: {
+        borderRightWidth: 0,
+      },
+    },
+    isBottomClamped: {
+      true: {
+        borderBottomWidth: 0,
+      },
+    },
+    isTopClamped: {
+      true: {
+        borderTopWidth: 0,
+      },
+    },
   },
   defaultVariants: { variant: "default" },
 });
@@ -68,18 +89,45 @@ const useDynamicStyle = (rect?: Rect) => {
 
 type OutlineProps = {
   children?: ReactNode;
-  rect?: Rect;
+  rect: Rect;
+  clampingRect: Rect;
   variant?: "default" | "collaboration" | "slot";
 };
 
-export const Outline = ({ children, rect, variant }: OutlineProps) => {
-  const dynamicStyle = useDynamicStyle(rect);
+export const Outline = ({
+  children,
+  rect,
+  clampingRect,
+  variant,
+}: OutlineProps) => {
+  const outlineRect = {
+    top: Math.max(rect.top, clampingRect.top),
+    height:
+      Math.min(rect.top + rect.height, clampingRect.top + clampingRect.height) -
+      Math.max(rect.top, clampingRect.top),
+
+    left: Math.max(rect.left, clampingRect.left),
+    width:
+      Math.min(rect.left + rect.width, clampingRect.left + clampingRect.width) -
+      Math.max(rect.left, clampingRect.left),
+  };
+
+  const isLeftClamped = rect.left < outlineRect.left;
+  const isTopClamped = rect.top < outlineRect.top;
+
+  const isRightClamped =
+    Math.round(rect.left + rect.width) > Math.round(clampingRect.width);
+
+  const isBottomClamped =
+    Math.round(rect.top + rect.height) > Math.round(clampingRect.height);
+
+  const dynamicStyle = useDynamicStyle(outlineRect);
 
   return (
     <>
       {propertyStyle}
       <div
-        className={`${baseStyle()} ${baseOutlineStyle({ variant })}`}
+        className={`${baseStyle()} ${baseOutlineStyle({ variant, isLeftClamped, isRightClamped, isBottomClamped, isTopClamped })}`}
         style={dynamicStyle}
       >
         {children}
diff --git a/apps/builder/app/builder/features/workspace/canvas-tools/outline/selected-instance-outline.tsx b/apps/builder/app/builder/features/workspace/canvas-tools/outline/selected-instance-outline.tsx
index 11e7edb50e53..63a970041f74 100644
--- a/apps/builder/app/builder/features/workspace/canvas-tools/outline/selected-instance-outline.tsx
+++ b/apps/builder/app/builder/features/workspace/canvas-tools/outline/selected-instance-outline.tsx
@@ -8,7 +8,7 @@ import { $textEditingInstanceSelector } from "~/shared/nano-states";
 import { type InstanceSelector } from "~/shared/tree-utils";
 import { Outline } from "./outline";
 import { applyScale } from "./apply-scale";
-import { $scale } from "~/builder/shared/nano-states";
+import { $clampingRect, $scale } from "~/builder/shared/nano-states";
 import { findClosestSlot } from "~/shared/instance-utils";
 import { $ephemeralStyles } from "~/canvas/stores";
 
@@ -26,11 +26,16 @@ export const SelectedInstanceOutline = () => {
   const outline = useStore($selectedInstanceOutlineAndInstance);
   const scale = useStore($scale);
   const ephemeralStyles = useStore($ephemeralStyles);
+  const clampingRect = useStore($clampingRect);
 
   if (selectedInstanceSelector === undefined) {
     return;
   }
 
+  if (clampingRect === undefined) {
+    return;
+  }
+
   const isEditingCurrentInstance =
     textEditingInstanceSelector !== undefined &&
     isDescendantOrSelf(
@@ -51,5 +56,5 @@ export const SelectedInstanceOutline = () => {
     : "default";
   const rect = applyScale(outline.rect, scale);
 
-  return <Outline rect={rect} variant={variant} />;
+  return <Outline rect={rect} clampingRect={clampingRect} variant={variant} />;
 };
diff --git a/apps/builder/app/builder/shared/nano-states/index.ts b/apps/builder/app/builder/shared/nano-states/index.ts
index 5ac9ed5180ae..b5b13d28ef53 100644
--- a/apps/builder/app/builder/shared/nano-states/index.ts
+++ b/apps/builder/app/builder/shared/nano-states/index.ts
@@ -18,6 +18,10 @@ export const $canvasRect = atom<DOMRect | undefined>();
 
 export const $workspaceRect = atom<DOMRect | undefined>();
 
+export const $canvasScrollbarSize = atom<
+  { width: number; height: number } | undefined
+>();
+
 export const $scale = computed(
   [$canvasWidth, $workspaceRect],
   (canvasWidth, workspaceRect) => {
@@ -34,6 +38,43 @@ export const $scale = computed(
   }
 );
 
+export const $clampingRect = computed(
+  [$workspaceRect, $canvasRect, $canvasScrollbarSize, $scale],
+  (workspaceRect, canvasRect, canvasScrollbarSize, scale) => {
+    if (
+      workspaceRect === undefined ||
+      canvasRect === undefined ||
+      canvasScrollbarSize === undefined
+    ) {
+      return;
+    }
+
+    const scrollbarWidthScaled = Math.round(
+      (canvasScrollbarSize.width * scale) / 100
+    );
+
+    const scrollbarHeightScaled = Math.round(
+      (canvasScrollbarSize.height * scale) / 100
+    );
+
+    if (canvasRect.width >= workspaceRect.width) {
+      return {
+        left: 0,
+        top: 0,
+        width: workspaceRect.width - scrollbarWidthScaled,
+        height: workspaceRect.height - scrollbarHeightScaled,
+      };
+    }
+
+    return {
+      left: 0,
+      top: 0,
+      width: canvasRect.width - scrollbarWidthScaled,
+      height: canvasRect.height - scrollbarHeightScaled,
+    };
+  }
+);
+
 export const $activeInspectorPanel = atom<"style" | "settings">("style");
 
 export const $dataLoadingState = atom<"idle" | "loading" | "loaded">("idle");
diff --git a/apps/builder/app/canvas/canvas.tsx b/apps/builder/app/canvas/canvas.tsx
index 68aeb640c9c5..381d5a420443 100644
--- a/apps/builder/app/canvas/canvas.tsx
+++ b/apps/builder/app/canvas/canvas.tsx
@@ -73,6 +73,7 @@ import { subscribeScrollNewInstanceIntoView } from "./shared/scroll-new-instance
 import { $selectedPage } from "~/shared/awareness";
 import { createInstanceElement } from "./elements";
 import { Body } from "./shared/body";
+import { subscribeScrollbarSize } from "./scrollbar-width";
 
 registerContainers();
 
@@ -166,6 +167,7 @@ const DesignMode = () => {
     // in both places
     initCopyPaste(options);
     manageDesignModeStyles(options);
+    subscribeScrollbarSize(options);
     updateCollaborativeInstanceRect(options);
     subscribeInstanceSelection(options);
     subscribeInstanceHovering(options);
@@ -200,6 +202,7 @@ const ContentEditMode = () => {
     const abortController = new AbortController();
     const options = { signal: abortController.signal };
     manageContentEditModeStyles(options);
+    subscribeScrollbarSize(options);
     subscribeInstanceSelection(options);
     subscribeInstanceHovering(options);
     subscribeFontLoadingDone(options);
diff --git a/apps/builder/app/canvas/scrollbar-width.ts b/apps/builder/app/canvas/scrollbar-width.ts
new file mode 100644
index 000000000000..96fee8d1b05a
--- /dev/null
+++ b/apps/builder/app/canvas/scrollbar-width.ts
@@ -0,0 +1,28 @@
+import { shallowEqual } from "shallow-equal";
+import { $canvasScrollbarSize } from "~/builder/shared/nano-states";
+
+export const subscribeScrollbarSize = ({ signal }: { signal: AbortSignal }) => {
+  const getScrollbarSize = () => ({
+    width: window.innerWidth - document.documentElement.clientWidth,
+    height: window.innerHeight - document.documentElement.clientHeight,
+  });
+
+  $canvasScrollbarSize.set(getScrollbarSize());
+
+  const observer = new ResizeObserver(() => {
+    const newSize = getScrollbarSize();
+    if (!shallowEqual($canvasScrollbarSize.get(), newSize)) {
+      $canvasScrollbarSize.set(newSize);
+    }
+  });
+
+  observer.observe(document.documentElement);
+
+  signal.addEventListener(
+    "abort",
+    () => {
+      observer.disconnect();
+    },
+    { once: true }
+  );
+};
diff --git a/apps/builder/app/shared/sync/sync-stores.ts b/apps/builder/app/shared/sync/sync-stores.ts
index 19065c8ed97b..86fb9b8c64fc 100644
--- a/apps/builder/app/shared/sync/sync-stores.ts
+++ b/apps/builder/app/shared/sync/sync-stores.ts
@@ -56,6 +56,7 @@ import {
   SyncObjectPool,
   type SyncEmitter,
 } from "../sync-client";
+import { $canvasScrollbarSize } from "~/builder/shared/nano-states";
 
 enableMapSet();
 // safari structuredClone fix
@@ -159,6 +160,7 @@ export const createObjectPool = () => {
       "registeredComponentPropsMetas",
       $registeredComponentPropsMetas
     ),
+    new NanostoresSyncObject("canvasScrollbarWidth", $canvasScrollbarSize),
   ]);
 };