diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent layout jump on modal open — use scrollbar-gutter: stable

Browse Source
This commit is contained in:
Diana Dolgolyova
2026-03-26 13:24:37 +03:00
parent 8088b99a43
commit a769ea844d
3 changed files with 7 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/globals.css
View File

@@ -17,6 +17,7 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
scrollbar-gutter: stable;
} }
body { body {

12
src/components/ui/NewsModal.tsx
View File

@@ -40,15 +40,9 @@ export function NewsModal({ item, onClose }: NewsModalProps) {
}, [item, onClose]); }, [item, onClose]);
useEffect(() => { useEffect(() => {
if (item) { if (item) document.body.style.overflow = "hidden";
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; else document.body.style.overflow = "";
document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = ""; };
document.body.style.paddingRight = `${scrollbarWidth}px`;
} else {
document.body.style.overflow = "";
document.body.style.paddingRight = "";
}
return () => { document.body.style.overflow = ""; document.body.style.paddingRight = ""; };
}, [item]); }, [item]);
if (!item) return null; if (!item) return null;

12
src/components/ui/SignupModal.tsx
View File

@@ -74,15 +74,9 @@ export function SignupModal({
}, [open, onClose]); }, [open, onClose]);
useEffect(() => { useEffect(() => {
if (open) { if (open) document.body.style.overflow = "hidden";
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; else document.body.style.overflow = "";
document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = ""; };
document.body.style.paddingRight = `${scrollbarWidth}px`;
} else {
document.body.style.overflow = "";
document.body.style.paddingRight = "";
}
return () => { document.body.style.overflow = ""; document.body.style.paddingRight = ""; };
}, [open]); }, [open]);
const handleSubmit = useCallback(async (e: React.FormEvent) => { const handleSubmit = useCallback(async (e: React.FormEvent) => {