From a769ea844d5dcae5b30028e47c207a19620ef22a Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Thu, 26 Mar 2026 13:24:37 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20prevent=20layout=20jump=20on=20modal=20o?=
 =?UTF-8?q?pen=20=E2=80=94=20use=20scrollbar-gutter:=20stable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css               |  1 +
 src/components/ui/NewsModal.tsx   | 12 +++---------
 src/components/ui/SignupModal.tsx | 12 +++---------
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 0bc4b5c..21869c4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -17,6 +17,7 @@
 
 html {
   scroll-behavior: smooth;
+  scrollbar-gutter: stable;
 }
 
 body {
diff --git a/src/components/ui/NewsModal.tsx b/src/components/ui/NewsModal.tsx
index 87e23b2..792948a 100644
--- a/src/components/ui/NewsModal.tsx
+++ b/src/components/ui/NewsModal.tsx
@@ -40,15 +40,9 @@ export function NewsModal({ item, onClose }: NewsModalProps) {
   }, [item, onClose]);
 
   useEffect(() => {
-    if (item) {
-      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.overflow = "hidden";
-      document.body.style.paddingRight = `${scrollbarWidth}px`;
-    } else {
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    }
-    return () => { document.body.style.overflow = ""; document.body.style.paddingRight = ""; };
+    if (item) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => { document.body.style.overflow = ""; };
   }, [item]);
 
   if (!item) return null;
diff --git a/src/components/ui/SignupModal.tsx b/src/components/ui/SignupModal.tsx
index 68e1df3..3957496 100644
--- a/src/components/ui/SignupModal.tsx
+++ b/src/components/ui/SignupModal.tsx
@@ -74,15 +74,9 @@ export function SignupModal({
   }, [open, onClose]);
 
   useEffect(() => {
-    if (open) {
-      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.overflow = "hidden";
-      document.body.style.paddingRight = `${scrollbarWidth}px`;
-    } else {
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    }
-    return () => { document.body.style.overflow = ""; document.body.style.paddingRight = ""; };
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => { document.body.style.overflow = ""; };
   }, [open]);
 
   const handleSubmit = useCallback(async (e: React.FormEvent) => {