feat: make modal content scrollable (#737)

bosonprotocol · May 22, 2024 · f3cc99a · f3cc99a
1 parent bb1783e
commit f3cc99a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git 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
@@ -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
@@ -2,4 +2,6 @@ import styled from "styled-components";
 
 export const Content = styled.div`
   padding: 2rem;
+  flex: 1;
+  overflow-y: auto;
 `;