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(() => {