Merge pull request #329 from nada-deriv/nada/FEQ-2643/page-scroll

Nada/feq 2643/page scroll
deriv-com · Sep 18, 2024 · 0b2639b · 0b2639b
2 parents 8fc51fb + 6485425
commit 0b2639b
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 28 deletions.
diff --git a/src/pages/buy-sell/screens/BuySell/BuySell.scss b/src/pages/buy-sell/screens/BuySell/BuySell.scss
@@ -1,5 +1,10 @@
 .buy-sell {
     height: 100%;
+
+    &--not-verified {
+        overflow-y: auto;
+        height: calc(100% - 11rem);
+    }
     & .buy-sell-table {
         & .table {
             @include mobile-or-tablet-screen {

diff --git a/src/pages/buy-sell/screens/BuySell/BuySell.tsx b/src/pages/buy-sell/screens/BuySell/BuySell.tsx
@@ -16,14 +16,14 @@ const BuySell = () => {
 
     if (poiPoaVerified === 'false') {
         return (
-            <>
+            <div className='buy-sell--not-verified'>
                 <PageReturn
                     onClick={() => history.replace({ pathname: BUY_SELL_URL, search: '' })}
                     pageTitle={localize('Verification')}
                     weight='bold'
                 />
                 <Verification />
-            </>
+            </div>
         );
     }
 

diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx b/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx
@@ -41,30 +41,32 @@ const BuySellTableRenderer = ({
 
     if ((!data && !searchValue) || (data.length === 0 && !searchValue)) {
         return (
-            <div className='mt-[5.5rem] lg:mt-10'>
-                <ActionScreen
-                    actionButtons={
-                        <Button
-                            disabled={isAdvertiserBarred}
-                            onClick={() => history.push(MY_ADS_URL)}
-                            size='lg'
-                            textSize={isMobile ? 'md' : 'sm'}
-                        >
-                            <Localize i18n_default_text='Create ad' />
-                        </Button>
-                    }
-                    description={
-                        <Text align='center' as='div' className='w-[32rem] md:w-full'>
-                            <Localize i18n_default_text='Looking to buy or sell USD? You can post your own ad for others to respond.' />
-                        </Text>
-                    }
-                    icon={<DerivLightIcCashierNoAdsIcon height='128px' width='128px' />}
-                    title={
-                        <Text weight='bold'>
-                            <Localize i18n_default_text='No ads for this currency 😞' />
-                        </Text>
-                    }
-                />
+            <div className='h-[calc(100%-26rem)] overflow-y-auto'>
+                <div className='mt-[5.5rem] lg:mt-10 mb-16'>
+                    <ActionScreen
+                        actionButtons={
+                            <Button
+                                disabled={isAdvertiserBarred}
+                                onClick={() => history.push(MY_ADS_URL)}
+                                size='lg'
+                                textSize={isMobile ? 'md' : 'sm'}
+                            >
+                                <Localize i18n_default_text='Create ad' />
+                            </Button>
+                        }
+                        description={
+                            <Text align='center' as='div' className='w-[32rem] md:w-full'>
+                                <Localize i18n_default_text='Looking to buy or sell USD? You can post your own ad for others to respond.' />
+                            </Text>
+                        }
+                        icon={<DerivLightIcCashierNoAdsIcon height='128px' width='128px' />}
+                        title={
+                            <Text weight='bold'>
+                                <Localize i18n_default_text='No ads for this currency 😞' />
+                            </Text>
+                        }
+                    />
+                </div>
             </div>
         );
     }

diff --git a/src/pages/my-ads/screens/MyAds/MyAds.tsx b/src/pages/my-ads/screens/MyAds/MyAds.tsx
@@ -7,7 +7,12 @@ const MyAds = () => {
     const { data } = usePoiPoaStatus();
     const { isPoaVerified, isPoiVerified } = data || {};
 
-    if (!isPoaVerified || !isPoiVerified) return <Verification />;
+    if (!isPoaVerified || !isPoiVerified)
+        return (
+            <div className='overflow-y-auto h-[calc(100%-11rem)]'>
+                <Verification />;
+            </div>
+        );
 
     return (
         <div className='flex flex-col h-full'>

diff --git a/src/pages/my-profile/screens/MyProfile/MyProfile.tsx b/src/pages/my-profile/screens/MyProfile/MyProfile.tsx
@@ -50,7 +50,11 @@ const MyProfile = () => {
     }
 
     if (!isPoiVerified || !isPoaVerified) {
-        return <Verification />;
+        return (
+            <div className='overflow-y-auto h-[calc(100%-11rem)]'>
+                <Verification />
+            </div>
+        );
     }
 
     if (!isDesktop) {