From 6e69ecf820c861c8c4034de5bbb5e88dd5d89311 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Wed, 3 Jan 2024 08:28:39 -0800
Subject: [PATCH] [PAY-2281] Fix mobile web purchase modal footer placement
 (#7059)

---
 .../stems/src/components/Modal/ModalContentPages.module.css  | 1 +
 .../PremiumContentPurchaseModal.module.css                   | 5 +++++
 .../PremiumContentPurchaseModal.tsx                          | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/stems/src/components/Modal/ModalContentPages.module.css b/packages/stems/src/components/Modal/ModalContentPages.module.css
index 9c67aa10270..16576863937 100644
--- a/packages/stems/src/components/Modal/ModalContentPages.module.css
+++ b/packages/stems/src/components/Modal/ModalContentPages.module.css
@@ -1,6 +1,7 @@
 .transitionContainer {
   position: relative;
   height: 100%;
+  flex-grow: 1;
 }
 
 .transitionContainer > * {
diff --git a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.module.css b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.module.css
index 4b0607d9fdb..6615535656d 100644
--- a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.module.css
+++ b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.module.css
@@ -2,6 +2,10 @@
   width: 720px;
 }
 
+.modalRoot.mobile {
+  height: 100%;
+}
+
 .modalHeader.mobile {
   margin: 0;
   padding: 0;
@@ -33,5 +37,6 @@
 }
 
 .mobileWrapper {
+  height: 100%;
   padding: 0px 0px;
 }
diff --git a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
index 79291331875..a6917c64c88 100644
--- a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
+++ b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
@@ -103,7 +103,7 @@ const RenderForm = ({
   const mobile = isMobile()
 
   return (
-    <ModalForm>
+    <ModalForm className={cn(styles.modalRoot, { [styles.mobile]: mobile })}>
       <ModalHeader
         className={cn(styles.modalHeader, { [styles.mobile]: mobile })}
         onClose={onClose}