Merge pull request #39 from arapl3y/feature/fix-modal-layout-shift

feat: fix modal and scrollbar layout shift

src/components/modal/modal.tsx

@@ -19,6 +19,8 @@ interface ModalProps {
   wide?: boolean;
 }
 
+const TRANSITION_DURATION = 300;
+
 export function Modal({
   children,
   lockBody = true,
@@ -34,9 +36,12 @@ export function Modal({
 
   useEffect(() => {
     if (show && lockBody) {
-      document.body.style.overflow = 'hidden';
+      document.body.style.overflowY = 'hidden';
     } else if (lockBody) {
-      document.body.style.overflow = 'auto';
+      // Wait for transition to finish before allowing scrollbar to return
+      setTimeout(() => {
+        document.body.style.overflowY = 'auto';
+      }, TRANSITION_DURATION);
     }
   }, [show, lockBody]);
 
@@ -68,6 +73,7 @@ export function Modal({
         <motion.div
           {...animationProps}
           className={styles.overlay}
+          transition={{ duration: TRANSITION_DURATION / 1000 }}
           variants={variants.overlay}
           onClick={onClose}
           onKeyDown={onClose}
@@ -76,6 +82,7 @@ export function Modal({
           <motion.div
             {...animationProps}
             className={cn(styles.content, wide && styles.wide)}
+            transition={{ duration: TRANSITION_DURATION / 1000 }}
             variants={variants.modal}
           >
             <button className={styles.close} onClick={onClose}>

src/components/toolbar/toolbar.module.css

@@ -3,7 +3,7 @@
   bottom: 20px;
   left: 0;
   z-index: 15;
-  width: 100%;
+  width: 100vw;
 
   .container {
     display: flex;

src/styles/base/base.css

@@ -16,6 +16,9 @@ body {
   font-size: var(--font-base);
   color: var(--color-foreground);
   background-color: var(--color-neutral-50);
+  /* Workaround for modal and scrollbar layout shifts */
+  width: 100vw;
+  overflow-x: hidden;
 }
 
 ::selection {