From a1e8b2623784e8fc0c6d8e51161702f9f1288411 Mon Sep 17 00:00:00 2001
From: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>
Date: Mon, 12 Dec 2022 13:25:51 +0400
Subject: [PATCH 1/3] fix: trading assessment alignment (#7146)

---
 packages/core/src/sass/account-wizard.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/src/sass/account-wizard.scss b/packages/core/src/sass/account-wizard.scss
index 868a826f1881..72999829818b 100644
--- a/packages/core/src/sass/account-wizard.scss
+++ b/packages/core/src/sass/account-wizard.scss
@@ -588,6 +588,7 @@
 
     &__wrapper__question {
         .dc-radio-group {
+            display: grid;
             gap: 1.6rem;
         }
         @include mobile() {

From a5faded3fbf0f48e7826789b9aad25165fa977a3 Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Mon, 12 Dec 2022 17:07:36 +0400
Subject: [PATCH 2/3] fix: responsive sroll issue for traders hub

---
 .../src/modules/trading-hub/index.tsx         | 211 +++++++++---------
 1 file changed, 111 insertions(+), 100 deletions(-)

diff --git a/packages/appstore/src/modules/trading-hub/index.tsx b/packages/appstore/src/modules/trading-hub/index.tsx
index c22bf79e2e7f..0fad6c8c9958 100644
--- a/packages/appstore/src/modules/trading-hub/index.tsx
+++ b/packages/appstore/src/modules/trading-hub/index.tsx
@@ -3,8 +3,17 @@ import { observer } from 'mobx-react-lite';
 import { platform_config, mf_platform_config } from 'Constants/platform-config';
 import Joyride from 'react-joyride';
 import { useHistory } from 'react-router-dom';
-import { Text, Button, ButtonToggle, Dropdown, DesktopWrapper, MobileWrapper, Loading } from '@deriv/components';
-import { routes, isMobile } from '@deriv/shared';
+import {
+    Button,
+    ButtonToggle,
+    DesktopWrapper,
+    Div100vhContainer,
+    Dropdown,
+    Loading,
+    MobileWrapper,
+    Text,
+} from '@deriv/components';
+import { routes, isMobile, isDesktop } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import ToggleAccountType from 'Components/toggle-account-type';
 import {
@@ -189,113 +198,115 @@ const TradingHub: React.FC = () => {
     if (is_loading) return <Loading className='cfd-accounts-container__loader' is_fullscreen={false} />;
 
     return (
-        <div id='trading-hub' className='trading-hub'>
-            <div className='trading-hub_header'>
-                <div className='trading-hub_header--title'>
-                    <Text weight='bold' size={isMobile() ? 'xxs' : 'm'} align='left'>
-                        {localize("Trader's hub")}
-                    </Text>
+        <Div100vhContainer height_offset='40px' is_disabled={isDesktop()}>
+            <div id='trading-hub' className='trading-hub'>
+                <div className='trading-hub_header'>
+                    <div className='trading-hub_header--title'>
+                        <Text weight='bold' size={isMobile() ? 'xxs' : 'm'} align='left'>
+                            {localize("Trader's hub")}
+                        </Text>
+                    </div>
+                    <div className='trading-hub_header--account'>
+                        <TotalAssets category={tab_account_type} className='trading-hub_header--account_assets' />
+                        <DesktopWrapper>
+                            <ToggleAccountType
+                                accountTypeChange={(event: {
+                                    target: {
+                                        value: string;
+                                        name: string;
+                                    };
+                                }) => {
+                                    accountTypeChange(event);
+                                }}
+                                value={tab_account_type}
+                            />
+                        </DesktopWrapper>
+                        <MobileWrapper>
+                            <Dropdown
+                                id='platfrom_toggle_options'
+                                className='trading-hub_header--platfrom_toggle_options'
+                                is_alignment_left={false}
+                                is_nativepicker={false}
+                                list={account_toggle_options}
+                                name='multiplier'
+                                no_border={true}
+                                value={tab_account_type}
+                                onChange={accountTypeChange}
+                            />
+                        </MobileWrapper>
+                    </div>
                 </div>
-                <div className='trading-hub_header--account'>
-                    <TotalAssets category={tab_account_type} className='trading-hub_header--account_assets' />
+
+                <div className='trading-hub_body'>
                     <DesktopWrapper>
-                        <ToggleAccountType
-                            accountTypeChange={(event: {
-                                target: {
-                                    value: string;
-                                    name: string;
-                                };
-                            }) => {
-                                accountTypeChange(event);
-                            }}
-                            value={tab_account_type}
+                        <CFDAccounts account_type={tab_account_type} />
+                        <Divider horizontal className='trading-hub_body--divider' />
+                        <OptionsAccounts
+                            platformlauncherprops={is_eu ? mf_platform_config : platform_config}
+                            accountType={tab_account_type}
                         />
                     </DesktopWrapper>
                     <MobileWrapper>
-                        <Dropdown
-                            id='platfrom_toggle_options'
-                            className='trading-hub_header--platfrom_toggle_options'
-                            is_alignment_left={false}
-                            is_nativepicker={false}
-                            list={account_toggle_options}
-                            name='multiplier'
-                            no_border={true}
-                            value={tab_account_type}
-                            onChange={accountTypeChange}
+                        <ButtonToggle
+                            buttons_arr={platform_toggle_options}
+                            className='trading-hub_body--platform_type_toggle'
+                            has_rounded_button
+                            is_animated
+                            name='platforn_type'
+                            onChange={platformTypeChange}
+                            value={platform_type}
                         />
+                        {platform_type === 'cfd' && <CFDAccounts account_type={tab_account_type} />}
+                        {platform_type === 'options' && (
+                            <OptionsAccounts
+                                platformlauncherprops={is_eu ? mf_platform_config : platform_config}
+                                accountType={tab_account_type}
+                            />
+                        )}
                     </MobileWrapper>
                 </div>
+                <Joyride
+                    run={is_tour_open}
+                    continuous
+                    disableScrolling
+                    hideCloseButton
+                    disableCloseOnEsc
+                    steps={tour_step_config}
+                    styles={is_dark_mode_on ? tour_styles_dark_mode : tour_styles}
+                    locale={tour_step_locale}
+                    floaterProps={{
+                        disableAnimation: true,
+                    }}
+                />
+                <JurisdictionModal context={store} openPasswordModal={openRealPasswordModal} />
+                <CFDPasswordModal context={store} platform={platform} />
+                <CFDDbviOnBoarding context={store} />
+                <CFDPersonalDetailsModal context={store} />
+                <CFDResetPasswordModal context={store} platform={platform} />
+                <CFDServerErrorDialog context={store} />
+                <CFDTopUpDemoModal context={store} />
+                <MT5TradeModal
+                    context={store}
+                    current_list={current_list}
+                    is_open={is_mt5_trade_modal_visible}
+                    onPasswordManager={togglePasswordManagerModal}
+                    toggleModal={toggleMT5TradeModal}
+                    is_eu_user={(is_logged_in && is_eu) || (!is_logged_in && is_eu_country)}
+                />
+                <CFDPasswordManagerModal
+                    is_visible={password_manager.is_visible}
+                    context={store}
+                    selected_login={password_manager.selected_login}
+                    selected_account={password_manager.selected_account}
+                    selected_account_group={password_manager.selected_account_group}
+                    selected_account_type={password_manager.selected_account_type}
+                    selected_server={password_manager.selected_server}
+                    platform={platform}
+                    toggleModal={togglePasswordManagerModal}
+                />
+                <ResetTradingPasswordModal context={store} />
             </div>
-
-            <div className='trading-hub_body'>
-                <DesktopWrapper>
-                    <CFDAccounts account_type={tab_account_type} />
-                    <Divider horizontal className='trading-hub_body--divider' />
-                    <OptionsAccounts
-                        platformlauncherprops={is_eu ? mf_platform_config : platform_config}
-                        accountType={tab_account_type}
-                    />
-                </DesktopWrapper>
-                <MobileWrapper>
-                    <ButtonToggle
-                        buttons_arr={platform_toggle_options}
-                        className='trading-hub_body--platform_type_toggle'
-                        has_rounded_button
-                        is_animated
-                        name='platforn_type'
-                        onChange={platformTypeChange}
-                        value={platform_type}
-                    />
-                    {platform_type === 'cfd' && <CFDAccounts account_type={tab_account_type} />}
-                    {platform_type === 'options' && (
-                        <OptionsAccounts
-                            platformlauncherprops={is_eu ? mf_platform_config : platform_config}
-                            accountType={tab_account_type}
-                        />
-                    )}
-                </MobileWrapper>
-            </div>
-            <Joyride
-                run={is_tour_open}
-                continuous
-                disableScrolling
-                hideCloseButton
-                disableCloseOnEsc
-                steps={tour_step_config}
-                styles={is_dark_mode_on ? tour_styles_dark_mode : tour_styles}
-                locale={tour_step_locale}
-                floaterProps={{
-                    disableAnimation: true,
-                }}
-            />
-            <JurisdictionModal context={store} openPasswordModal={openRealPasswordModal} />
-            <CFDPasswordModal context={store} platform={platform} />
-            <CFDDbviOnBoarding context={store} />
-            <CFDPersonalDetailsModal context={store} />
-            <CFDResetPasswordModal context={store} platform={platform} />
-            <CFDServerErrorDialog context={store} />
-            <CFDTopUpDemoModal context={store} />
-            <MT5TradeModal
-                context={store}
-                current_list={current_list}
-                is_open={is_mt5_trade_modal_visible}
-                onPasswordManager={togglePasswordManagerModal}
-                toggleModal={toggleMT5TradeModal}
-                is_eu_user={(is_logged_in && is_eu) || (!is_logged_in && is_eu_country)}
-            />
-            <CFDPasswordManagerModal
-                is_visible={password_manager.is_visible}
-                context={store}
-                selected_login={password_manager.selected_login}
-                selected_account={password_manager.selected_account}
-                selected_account_group={password_manager.selected_account_group}
-                selected_account_type={password_manager.selected_account_type}
-                selected_server={password_manager.selected_server}
-                platform={platform}
-                toggleModal={togglePasswordManagerModal}
-            />
-            <ResetTradingPasswordModal context={store} />
-        </div>
+        </Div100vhContainer>
     );
 };
 

From 50f6d859c84d3ee589540e2e327fb8cd63d60491 Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Mon, 12 Dec 2022 20:17:45 +0400
Subject: [PATCH 3/3] fix: PR changes

---
 packages/core/src/sass/account-wizard.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/src/sass/account-wizard.scss b/packages/core/src/sass/account-wizard.scss
index 72999829818b..868a826f1881 100644
--- a/packages/core/src/sass/account-wizard.scss
+++ b/packages/core/src/sass/account-wizard.scss
@@ -588,7 +588,6 @@
 
     &__wrapper__question {
         .dc-radio-group {
-            display: grid;
             gap: 1.6rem;
         }
         @include mobile() {