From f5d49b38ce655e7924ec166aa1431c4cda4df04b Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Mon, 23 Sep 2024 13:29:18 +0800
Subject: [PATCH] fix

---
 .changeset/rare-zoos-shout.md                             | 5 +++++
 apps/www/src/registry/default/example/playground-demo.tsx | 2 +-
 packages/selection/src/internal/SelectionArea.ts          | 8 ++++----
 3 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/rare-zoos-shout.md

diff --git a/.changeset/rare-zoos-shout.md b/.changeset/rare-zoos-shout.md
new file mode 100644
index 0000000000..7987632858
--- /dev/null
+++ b/.changeset/rare-zoos-shout.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-selection': patch
+---
+
+Fix width issues caused by hover scrollbars.
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index 1438d9aea1..2369f0246e 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -368,7 +368,7 @@ export default function PlaygroundDemo({
                   variant="ghost"
                   className={cn(
                     editableProps.className,
-                    ' overflow-x-hidden px-[var(--editor-px)]',
+                    'overflow-x-auto px-[var(--editor-px)]',
                     !id && 'pb-[20vh] pt-4',
                     id && 'pb-8 pt-2'
                   )}
diff --git a/packages/selection/src/internal/SelectionArea.ts b/packages/selection/src/internal/SelectionArea.ts
index b03568f079..42d9d35ee1 100644
--- a/packages/selection/src/internal/SelectionArea.ts
+++ b/packages/selection/src/internal/SelectionArea.ts
@@ -102,16 +102,16 @@ export class SelectionArea extends EventTarget<SelectionEvents> {
           speedDivider: 10,
           ...opt.behaviour?.scrolling,
           startScrollMargins: {
-            x: 0,
-            y: 0,
+            x: 20,
+            y: 20,
             ...opt.behaviour?.scrolling?.startScrollMargins,
           },
         },
         startThreshold: opt.behaviour?.startThreshold
           ? typeof opt.behaviour.startThreshold === 'number'
             ? opt.behaviour.startThreshold
-            : { x: 10, y: 10, ...opt.behaviour.startThreshold }
-          : { x: 10, y: 10 },
+            : { x: 20, y: 20, ...opt.behaviour.startThreshold }
+          : { x: 20, y: 20 },
       },
 
       features: {