From c7311a4e03dbda76a19cfe8e67601dba7c6f6656 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 3 Jul 2023 20:50:44 -0700
Subject: [PATCH] Fix footer shadow in EditPartyModal

---
 .../common/DialogFooter/index.module.scss       |  1 +
 .../party/EditPartyModal/index.module.scss      |  1 -
 components/party/EditPartyModal/index.tsx       | 17 ++++++++++-------
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/common/DialogFooter/index.module.scss b/components/common/DialogFooter/index.module.scss
index 1470f420..9f29d949 100644
--- a/components/common/DialogFooter/index.module.scss
+++ b/components/common/DialogFooter/index.module.scss
@@ -11,6 +11,7 @@
   justify-content: space-between;
   padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
   position: sticky;
+  transition: box-shadow 0.1s ease-out, border-top 0.1s ease-out;
 
   .left,
   .right {
diff --git a/components/party/EditPartyModal/index.module.scss b/components/party/EditPartyModal/index.module.scss
index 229e15ba..b8d757c3 100644
--- a/components/party/EditPartyModal/index.module.scss
+++ b/components/party/EditPartyModal/index.module.scss
@@ -9,7 +9,6 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: $unit-2x;
   height: 100%;
   overflow: hidden;
 
diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx
index d75daa39..cd2afe07 100644
--- a/components/party/EditPartyModal/index.tsx
+++ b/components/party/EditPartyModal/index.tsx
@@ -246,16 +246,21 @@ const EditPartyModal = ({
 
   const calculateFooterShadow = debounce(() => {
     const boxShadowBase = '0 -2px 8px'
-    const scrollable = document.querySelector(`.${styles.scrollValue}`)
+    const scrollable = document.querySelector(`.${styles.scrollable}`)
     const footer = footerRef
 
     if (footer && footer.current) {
-      if (scrollable && scrollable.clientHeight >= scrollable.scrollHeight) {
+      if (scrollable) {
+        if (scrollable.clientHeight >= scrollable.scrollHeight) {
+          footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0)`
+          footer.current.style.borderTopColor = `rgba(0, 0, 0, 0)`
+        } else {
+          footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0.16)`
+          footer.current.style.borderTopColor = `rgba(0, 0, 0, 0.24)`
+        }
+      } else {
         footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0)`
         footer.current.style.borderTopColor = `rgba(0, 0, 0, 0)`
-      } else {
-        footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0.16)`
-        footer.current.style.borderTopColor = `rgba(0, 0, 0, 0.24)`
       }
     }
   }, 100)
@@ -566,8 +571,6 @@ const EditPartyModal = ({
         <DialogTrigger asChild>{props.children}</DialogTrigger>
         <DialogContent
           className="editParty"
-          headerref={topContainerRef}
-          footerref={footerRef}
           onEscapeKeyDown={onEscapeKeyDown}
           onOpenAutoFocus={onOpenAutoFocus}
         >