From f3cc99a8b024b7068ba777c2b04361e976f5115f Mon Sep 17 00:00:00 2001
From: albertfolch-redeemeum
 <102516373+albertfolch-redeemeum@users.noreply.github.com>
Date: Wed, 22 May 2024 16:19:40 +0200
Subject: [PATCH] feat: make modal content scrollable (#737)

---
 .../react-kit/src/components/modal/Modal.tsx  | 21 ++++++++-----------
 .../components/modal/nonModal/NonModal.tsx    | 10 ++++-----
 .../src/components/modal/nonModal/styles.tsx  |  2 ++
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/react-kit/src/components/modal/Modal.tsx b/packages/react-kit/src/components/modal/Modal.tsx
index 8787abd0e..6032e23cb 100644
--- a/packages/react-kit/src/components/modal/Modal.tsx
+++ b/packages/react-kit/src/components/modal/Modal.tsx
@@ -19,10 +19,6 @@ const Root = styled.div`
   left: 0;
   right: 0;
   z-index: ${zIndex.Modal};
-  max-height: 100vh;
-  max-width: 100vw;
-  overflow-y: auto;
-  overflow-x: hidden;
 `;
 
 const RootBG = styled.div`
@@ -92,6 +88,10 @@ const Wrapper = styled.div<{
   $themeVal: Props["theme"];
   $maxWidths: Props["maxWidths"];
 }>`
+  display: flex;
+  flex-direction: column;
+  max-height: 96vh;
+  overflow: auto;
   position: relative;
   z-index: ${zIndex.Modal};
   color: ${({ $themeVal }) => {
@@ -173,7 +173,7 @@ const Wrapper = styled.div<{
   }
   ${({ $size }) =>
     $size === "fullscreen" &&
-    `
+    css`
       min-height: 100vh;
     `};
 `;
@@ -206,11 +206,10 @@ const Close = styled(X)`
   }
 `;
 
-const Content = styled.div<{
-  $modalType: ModalType;
-  $size: Props["size"];
-}>`
+const Content = styled.div`
   padding: 2rem;
+  flex: 1;
+  overflow-y: auto;
 `;
 
 interface Props {
@@ -272,9 +271,7 @@ export default function Modal({
             )}
           </HeaderWithTitle>
         )}
-        <Content $size={size} $modalType={modalType} style={contentStyle}>
-          {children}
-        </Content>
+        <Content style={contentStyle}>{children}</Content>
         {FooterComponent && <FooterWrapper>{FooterComponent}</FooterWrapper>}
       </Wrapper>
       <RootBG
diff --git a/packages/react-kit/src/components/modal/nonModal/NonModal.tsx b/packages/react-kit/src/components/modal/nonModal/NonModal.tsx
index 7b3fd85ce..0edb2ed56 100644
--- a/packages/react-kit/src/components/modal/nonModal/NonModal.tsx
+++ b/packages/react-kit/src/components/modal/nonModal/NonModal.tsx
@@ -23,10 +23,6 @@ const Root = styled.div`
   left: 0;
   right: 0;
   z-index: ${zIndex.Modal};
-  max-height: 100vh;
-  max-width: 100vw;
-  overflow-y: auto;
-  overflow-x: hidden;
 `;
 
 const RootBG = styled.div`
@@ -95,6 +91,10 @@ const Wrapper = styled.div<{
   $themeVal: NonModalProps["theme"];
   $maxWidths: NonModalProps["maxWidths"];
 }>`
+  display: flex;
+  flex-direction: column;
+  max-height: 96vh;
+  overflow: auto;
   position: relative;
   z-index: ${zIndex.Modal};
   color: ${({ $themeVal }) => {
@@ -155,7 +155,7 @@ const Wrapper = styled.div<{
   }
   ${({ $size }) =>
     $size === "fullscreen" &&
-    `
+    css`
       min-height: 100vh;
     `};
 `;
diff --git a/packages/react-kit/src/components/modal/nonModal/styles.tsx b/packages/react-kit/src/components/modal/nonModal/styles.tsx
index 2b1353ed8..f4ddf0a61 100644
--- a/packages/react-kit/src/components/modal/nonModal/styles.tsx
+++ b/packages/react-kit/src/components/modal/nonModal/styles.tsx
@@ -2,4 +2,6 @@ import styled from "styled-components";
 
 export const Content = styled.div`
   padding: 2rem;
+  flex: 1;
+  overflow-y: auto;
 `;