Make onboarding steps scrollable to handle screen edge cases

src/components/Onboarding/helperComponents.js

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { radii } from 'styles/theme'
 
 import Box from 'components/base/Box'
+import GrowScroll from 'components/base/GrowScroll'
 import IconSensitiveOperationShield from 'icons/illustrations/SensitiveOperationShield'
 
 // GENERAL
@@ -16,6 +17,8 @@ export const Title = styled(Box).attrs({
   text-align: center;
 `
 
+export const StepContainerInner = styled(GrowScroll).attrs({ pb: 6, align: 'center' })``
+
 export const Description = styled(Box).attrs({
   ff: 'Museo Sans|Light',
   fontSize: 5,

src/components/Onboarding/steps/Analytics.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import { saveSettings } from 'actions/settings'
 import Box from 'components/base/Box'
 import CheckBox from 'components/base/CheckBox'
-import { Title, Description, FixedTopContainer } from '../helperComponents'
+import { Title, Description, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
 import type { StepProps } from '..'
@@ -51,7 +51,7 @@ class Analytics extends PureComponent<StepProps, State> {
 
     return (
       <FixedTopContainer>
-        <Box grow alignItems="center">
+        <StepContainerInner>
           <Title>{t('onboarding:analytics.title')}</Title>
           <Description>{t('onboarding:analytics.desc')}</Description>
           <Box mt={5}>
@@ -74,7 +74,7 @@ class Analytics extends PureComponent<StepProps, State> {
               </Box>
             </Container>
           </Box>
-        </Box>
+        </StepContainerInner>
         <OnboardingFooter
           horizontal
           align="center"

src/components/Onboarding/steps/GenuineCheck.js

@@ -26,6 +26,7 @@ import {
   Description,
   IconOptionRow,
   FixedTopContainer,
+  StepContainerInner,
   OnboardingFooterWrapper,
 } from '../helperComponents'
 
@@ -157,7 +158,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
 
     return (
       <FixedTopContainer>
-        <Box grow alignItems="center">
+        <StepContainerInner>
           <Title>{t('onboarding:genuineCheck.title')}</Title>
           {onboarding.isLedgerNano ? (
             <Description>{t('onboarding:genuineCheck.descNano')}</Description>
@@ -249,7 +250,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
               )}
             </CardWrapper>
           </Box>
-        </Box>
+        </StepContainerInner>
         <OnboardingFooter
           horizontal
           align="center"

src/components/Onboarding/steps/SelectDevice.js

@@ -11,7 +11,7 @@ import Box from 'components/base/Box'
 import IconCheckCirle from 'icons/Check'
 import IconLedgerNano from 'icons/illustrations/LedgerNano'
 import IconLedgerBlue from 'icons/illustrations/LedgerBlue'
-import { Title, Inner, FixedTopContainer } from '../helperComponents'
+import { Title, Inner, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
 import type { StepProps } from '..'
@@ -35,7 +35,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
     const { t, onboarding, jumpStep } = this.props
     return (
       <FixedTopContainer>
-        <Box grow alignItems="center">
+        <StepContainerInner>
           <Box mb={5}>
             <Title>{t('onboarding:selectDevice.title')}</Title>
           </Box>
@@ -63,7 +63,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
               </DeviceContainer>
             </Inner>
           </Box>
-        </Box>
+        </StepContainerInner>
         <OnboardingFooter
           horizontal
           t={t}

src/components/Onboarding/steps/SetPassword.js

@@ -20,6 +20,7 @@ import {
   DisclaimerBox,
   FixedTopContainer,
   OnboardingFooterWrapper,
+  StepContainerInner,
 } from '../helperComponents'
 
 type State = {
@@ -96,7 +97,7 @@ class SetPassword extends PureComponent<StepProps, State> {
 
     return (
       <FixedTopContainer>
-        <Box grow alignItems="center">
+        <StepContainerInner>
           <Fragment>
             <Box alignItems="center">
               <Title>{t('onboarding:setPassword.title')}</Title>
@@ -120,7 +121,7 @@ class SetPassword extends PureComponent<StepProps, State> {
               <DisclaimerBox mt={7} disclaimerNotes={disclaimerNotes} />
             </Box>
           </Fragment>
-        </Box>
+        </StepContainerInner>
 
         <OnboardingFooterWrapper>
           <Button padded outlineGrey onClick={() => prevStep()}>