From a9fc723884f08e989bf8cb360070c1ae8aa80588 Mon Sep 17 00:00:00 2001
From: chefmomota <momota@pancakeswap.com>
Date: Wed, 26 Jul 2023 00:51:26 +0800
Subject: [PATCH] fix: Scrollbar

---
 .../RevenueSharing/BenefitsModal/RevenueSharing.tsx |  2 +-
 .../RevenueSharing/BenefitsModal/index.tsx          | 13 +++++++++----
 2 files changed, 10 insertions(+), 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
index cba988a237efe8..097d8e3604562b 100644
--- 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
index 3cc6464d558444..4ea8a563e8bd62 100644
--- 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 />