fix: scrolling modal for scaled browser (#15066)

binary-com · May 10, 2024 · 8b079e2 · 8b079e2
1 parent 80eb17d
commit 8b079e2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 39 deletions.
diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -23,9 +23,7 @@
         backface-visibility: hidden;
         transition: transform 0.6s ease;
         transform: rotateY(0deg);
-        @include mobile {
-            height: 100%;
-        }
+        height: 100%;
     }
 
     &__footer-content {
@@ -49,37 +47,33 @@
         }
     }
     &__wrapper {
-        @include desktop {
+        &--financial,
+        &--synthetic,
+        &--all {
+            height: 100%;
             position: relative;
+            bottom: 0;
+            overflow-y: scroll;
             perspective: 100rem;
-            overflow: scroll;
-            &--financial {
-                height: 76rem;
-            }
-            &--synthetic,
-            &--all {
-                height: 69rem;
+
+            @include mobile {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
             }
         }
     }
     &__flipped {
         @include desktop {
             height: 70rem;
+            overflow: scroll;
         }
 
         .jurisdiction-modal {
-            &__scrollable-content {
-                height: 80rem;
-            }
-
             &__content-wrapper {
-                height: 70rem;
+                height: 100%;
                 transform: rotateY(-180deg);
                 visibility: hidden;
-
-                @include mobile {
-                    height: 100%;
-                }
             }
         }
 
@@ -113,7 +107,9 @@
     &__wrapper {
         margin: 3rem 5rem 1rem;
         display: flex;
-        justify-content: center;
+        @include desktop {
+            justify-content: center;
+        }
         gap: 1.6rem;
         @include mobile {
             margin: 0;
@@ -2316,6 +2312,8 @@
 }
 
 .dc-modal__container_jurisdiction-modal {
+    overflow-y: scroll;
+
     .dc-modal-header {
         border-bottom: 2px solid var(--general-section-1);
     }

diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-content-wrapper.tsx
@@ -196,23 +196,21 @@ const JurisdictionModalContentWrapper = observer(({ openPasswordModal }: TJurisd
 
     return (
         <div className='jurisdiction-modal__content-wrapper'>
-            <div className='jurisdiction-modal__scrollable-content'>
-                <JurisdictionModalContent
-                    account_status={account_status}
-                    account_type={account_type.type}
-                    financial_available_accounts={financial_available_accounts}
-                    is_non_idv_design={is_non_idv_design}
-                    is_virtual={is_virtual}
-                    real_financial_accounts_existing_data={real_financial_accounts_existing_data}
-                    real_synthetic_accounts_existing_data={real_synthetic_accounts_existing_data}
-                    jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
-                    real_swapfree_accounts_existing_data={real_swapfree_accounts_existing_data}
-                    setJurisdictionSelectedShortcode={setJurisdictionSelectedShortcode}
-                    swapfree_available_accounts={swapfree_available_accounts}
-                    synthetic_available_accounts={synthetic_available_accounts}
-                    all_market_type_available_accounts={all_market_type_available_accounts}
-                />
-            </div>
+            <JurisdictionModalContent
+                account_status={account_status}
+                account_type={account_type.type}
+                financial_available_accounts={financial_available_accounts}
+                is_non_idv_design={is_non_idv_design}
+                is_virtual={is_virtual}
+                real_financial_accounts_existing_data={real_financial_accounts_existing_data}
+                real_synthetic_accounts_existing_data={real_synthetic_accounts_existing_data}
+                jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
+                real_swapfree_accounts_existing_data={real_swapfree_accounts_existing_data}
+                setJurisdictionSelectedShortcode={setJurisdictionSelectedShortcode}
+                swapfree_available_accounts={swapfree_available_accounts}
+                synthetic_available_accounts={synthetic_available_accounts}
+                all_market_type_available_accounts={all_market_type_available_accounts}
+            />
             <div className={classNames('jurisdiction-modal__footer-content', `cfd-jurisdiction-card__footer-wrapper`)}>
                 <div className={`cfd-jurisdiction-card--${account_type.type}__footnotes-container`}>
                     <JurisdictionModalFootNote

diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx
@@ -56,7 +56,8 @@ const JurisdictionModal = observer(({ openPasswordModal }: TJurisdictionModalPro
                             is_open={is_jurisdiction_modal_visible}
                             toggleModal={onJurisdictionModalToggle}
                             type='button'
-                            width={account_type.type === MARKET_TYPE.FINANCIAL ? '1200px' : '1040px'}
+                            width={account_type.type === MARKET_TYPE.FINANCIAL ? '120rem' : '104rem'}
+                            height={'82rem'}
                             has_close_icon={!is_dynamic_leverage_visible}
                             title={
                                 <JurisdictionModalTitle