2 files changed, 31 insertions, 20 deletions
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index bd60d287ee..dc986b13d5 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -9,6 +9,7 @@ import RedeemVoucherContainer from '../containers/RedeemVoucherContainer';
 import { LoginState } from '../redux/account/reducers';
 import * as AppButton from './AppButton';
 import * as Cell from './Cell';
+import CustomScrollbars from './CustomScrollbars';
 import styles, { StyledAccountTokenLabel } from './ExpiredAccountErrorViewStyles';
 import ImageView from './ImageView';
 import { ModalAlert, ModalAlertType } from './Modal';
@@ -60,30 +61,32 @@ export default class ExpiredAccountErrorView extends Component<
 
   public render() {
     return (
-      <View style={styles.container}>
-        <View style={styles.body}>{this.renderContent()}</View>
+      <CustomScrollbars style={styles.scrollview} fillContainer>
+        <View style={styles.container}>
+          <View style={styles.body}>{this.renderContent()}</View>
 
-        <View style={styles.footer}>
-          {this.getRecoveryAction() === RecoveryAction.disconnect && (
-            <AppButton.BlockingButton onPress={this.props.onDisconnect}>
-              <AppButton.RedButton style={styles.button}>
-                {messages.pgettext('connect-view', 'Disconnect')}
-              </AppButton.RedButton>
-            </AppButton.BlockingButton>
-          )}
+          <View style={styles.footer}>
+            {this.getRecoveryAction() === RecoveryAction.disconnect && (
+              <AppButton.BlockingButton onPress={this.props.onDisconnect}>
+                <AppButton.RedButton style={styles.button}>
+                  {messages.pgettext('connect-view', 'Disconnect')}
+                </AppButton.RedButton>
+              </AppButton.BlockingButton>
+            )}
 
-          {this.renderExternalPaymentButton()}
+            {this.renderExternalPaymentButton()}
 
-          <AppButton.GreenButton
-            disabled={this.getRecoveryAction() === RecoveryAction.disconnect}
-            onPress={this.onOpenRedeemVoucherAlert}>
-            {messages.pgettext('connect-view', 'Redeem voucher')}
-          </AppButton.GreenButton>
-        </View>
+            <AppButton.GreenButton
+              disabled={this.getRecoveryAction() === RecoveryAction.disconnect}
+              onPress={this.onOpenRedeemVoucherAlert}>
+              {messages.pgettext('connect-view', 'Redeem voucher')}
+            </AppButton.GreenButton>
+          </View>
 
-        {this.state.showRedeemVoucherAlert && this.renderRedeemVoucherAlert()}
-        {this.state.showBlockWhenDisconnectedAlert && this.renderBlockWhenDisconnectedAlert()}
-      </View>
+          {this.state.showRedeemVoucherAlert && this.renderRedeemVoucherAlert()}
+          {this.state.showBlockWhenDisconnectedAlert && this.renderBlockWhenDisconnectedAlert()}
+        </View>
+      </CustomScrollbars>
     );
   }
 
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 15891dd230..b49ef1aa40 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -12,9 +12,17 @@ export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
 });
 
 export default {
+  // plain CSS style
+  scrollview: {
+    flex: 1,
+  },
   container: Styles.createViewStyle({
     flex: 1,
     paddingTop: 24,
+    // ReactXP don't allow setting 'minHeight' and don't allow percentages. This will work well
+    // without the '@ts-ignore' when moving away from ReactXP.
+    // @ts-ignore
+    minHeight: '100%',
   }),
   body: Styles.createViewStyle({
     flex: 1,