Fix issue where onboarding doesn't scroll to wallet when starting from relayers page

2 files changed, 5 insertions, 6 deletions

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index e01da68a7..1c2c92fd1 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -57,13 +57,12 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         this._unlisten();
     }
     public componentDidUpdate(prevProps: PortalOnboardingFlowProps): void {
-        this._adjustStepIfShould();
-        if (!prevProps.isRunning && this.props.isRunning) {
+        // Any one of steps 0-3 could be the starting step, and we only want to reset the scroll on the starting step.
+        if (this.props.isRunning && utils.isMobileWidth(this.props.screenWidth) && this.props.stepIndex < 3) {
             // On mobile, make sure the wallet is completely visible.
-            if (this.props.screenWidth === ScreenWidths.Sm) {
-                document.querySelector('.wallet').scrollIntoView();
-            }
+            document.querySelector('.wallet').scrollIntoView();
         }
+        this._adjustStepIfShould();
         if (!prevProps.blockchainIsLoaded && this.props.blockchainIsLoaded) {
             this._autoStartOnboardingIfShould();
         }
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 2498fb928..1adbc86cd 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -320,7 +320,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private _renderWallet(): React.ReactNode {
         const isMobile = utils.isMobileWidth(this.props.screenWidth);
         // We need room to scroll down for mobile onboarding
-        const marginBottom = isMobile ? '200px' : '15px';
+        const marginBottom = isMobile ? '250px' : '15px';
         return (
             <div>
                 <Container className="flex flex-column items-center">