fix: Scrollbar

pancakeswap · Jul 25, 2023 · a9fc723 · a9fc723
1 parent 71443fa
commit a9fc723
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/apps/web/src/views/Pools/components/RevenueSharing/BenefitsModal/RevenueSharing.tsx b/apps/web/src/views/Pools/components/RevenueSharing/BenefitsModal/RevenueSharing.tsx
@@ -60,7 +60,7 @@ const RevenueSharing: React.FunctionComponent<React.PropsWithChildren<RevenueSha
   )
 
   return (
-    <Card isActive>
+    <Card isActive mb={['24px', '24px', '24px', '0']}>
       <Box padding={16}>
         <Text fontSize={12} bold color="secondary" textTransform="uppercase">
           {t('revenue sharing')}

diff --git a/apps/web/src/views/Pools/components/RevenueSharing/BenefitsModal/index.tsx b/apps/web/src/views/Pools/components/RevenueSharing/BenefitsModal/index.tsx
@@ -21,8 +21,8 @@ import { DeserializedLockedVaultUser } from 'state/types'
 
 const Container = styled(ModalContainer)`
   width: 100%;
-  max-height: '90vh';
-  overflow: 'hidden';
+  overflow: hidden;
+  max-height: 90vh;
 
   ${({ theme }) => theme.mediaQueries.md} {
     width: 375px;
@@ -32,7 +32,12 @@ const Container = styled(ModalContainer)`
 const ScrollableContainer = styled(Flex)`
   flex-direction: column;
   height: auto;
-  max-height: 63vh;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    max-height: 100vh;
+  }
+  ${({ theme }) => theme.mediaQueries.md} {
+    max-height: none;
+  }
 `
 
 interface BenefitsModalProps {
@@ -57,7 +62,7 @@ const BenefitsModal: React.FunctionComponent<React.PropsWithChildren<BenefitsMod
           </Text>
           <ModalCloseButton onDismiss={onDismiss} />
         </RowBetween>
-        <ModalBody mt="16px">
+        <ModalBody mt="16px" width="100%" style={{ maxHeight: 'calc(100vh - 260px)' }}>
           <ScrollableContainer px="24px">
             <SharingPoolNameCell />
             <LockedBenefits />