From e3996734621b33c0598db29e82371f1258396147 Mon Sep 17 00:00:00 2001
From: Alex Rapley <rapley3@gmail.com>
Date: Fri, 2 Aug 2024 16:40:08 +1000
Subject: [PATCH] feat: fix modal and scrollbar layout shift

---
 src/components/modal/modal.tsx            | 11 +++++++++--
 src/components/toolbar/toolbar.module.css |  2 +-
 src/styles/base/base.css                  |  3 +++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 5a41181..c4cf8b5 100644
--- a/src/components/modal/modal.tsx
+++ b/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}>
diff --git a/src/components/toolbar/toolbar.module.css b/src/components/toolbar/toolbar.module.css
index 4543e0e..267cbfc 100644
--- a/src/components/toolbar/toolbar.module.css
+++ b/src/components/toolbar/toolbar.module.css
@@ -3,7 +3,7 @@
   bottom: 20px;
   left: 0;
   z-index: 15;
-  width: 100%;
+  width: 100vw;
 
   .container {
     display: flex;
diff --git a/src/styles/base/base.css b/src/styles/base/base.css
index 5981cc2..14c6a48 100644
--- a/src/styles/base/base.css
+++ b/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 {