[PAY-2281] Fix mobile web purchase modal footer placement (#7059)

AudiusProject · Jan 3, 2024 · 6e69ecf · 6e69ecf
1 parent 733f140
commit 6e69ecf
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git 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/.../web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.module.css b/.../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
@@ -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}