From 928afd5a6cc49900279e45f4cf42a168213abf6d Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 17 Apr 2023 15:41:48 +0200
Subject: [PATCH] :bug: Auto scroll X behavior outside of editor

Closes #440
---
 apps/builder/src/assets/styles/custom.css |  3 +--
 apps/builder/src/pages/_app.tsx           | 10 +++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/builder/src/assets/styles/custom.css b/apps/builder/src/assets/styles/custom.css
index 48b8c707d..dad68a0ee 100644
--- a/apps/builder/src/assets/styles/custom.css
+++ b/apps/builder/src/assets/styles/custom.css
@@ -1,5 +1,4 @@
-html,
-body {
+.disable-scroll-x-behavior {
   overscroll-behavior-x: none;
 }
 
diff --git a/apps/builder/src/pages/_app.tsx b/apps/builder/src/pages/_app.tsx
index 730f8feaf..01820a431 100644
--- a/apps/builder/src/pages/_app.tsx
+++ b/apps/builder/src/pages/_app.tsx
@@ -26,9 +26,13 @@ const App = ({ Component, pageProps }: AppProps) => {
   const { query, pathname } = useRouter()
 
   useEffect(() => {
-    pathname.endsWith('/edit')
-      ? (document.body.style.overflow = 'hidden')
-      : (document.body.style.overflow = 'auto')
+    if (pathname.endsWith('/edit')) {
+      document.body.style.overflow = 'hidden'
+      document.body.classList.add('disable-scroll-x-behavior')
+    } else {
+      document.body.style.overflow = 'auto'
+      document.body.classList.remove('disable-scroll-x-behavior')
+    }
   }, [pathname])
 
   useEffect(() => {