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