Merge pull request #10265 from aimane-chnaif/fix-9817

fix page size changing after use wrong 2fa and clicking on Save button
Expensify · Aug 9, 2022 · 7ef2d5c · 7ef2d5c
2 parents 787f3a8 + 61948af
commit 7ef2d5c
Showing 1 changed file with 45 additions and 37 deletions.
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -37,54 +37,62 @@ const SignInPageContent = props => (
         showsVerticalScrollIndicator={false}
         style={[
             styles.h100,
-            styles.alignSelfCenter,
+            !props.isSmallScreenWidth && styles.alignSelfCenter,
             !props.isSmallScreenWidth && styles.signInPageWideLeftContainer,
         ]}
         contentContainerStyle={[
             scrollViewContentContainerStyles,
+            styles.alignItemsCenter,
             !props.isSmallScreenWidth && styles.ph6,
         ]}
     >
-        <SignInPageForm style={[
-            styles.flex1,
-            styles.alignSelfStretch,
-            props.isSmallScreenWidth && styles.signInPageNarrowContentContainer,
-            props.isSmallScreenWidth ? styles.ph5 : styles.ph4,
-        ]}
-        >
-            <LoginKeyboardAvoidingView
-                behavior="position"
-                contentContainerStyle={[
-                    props.isSmallScreenWidth ? styles.signInPageNarrowContentMargin : {},
-                    !props.isMediumScreenWidth ? styles.signInPageWideLeftContentMargin : {},
-                    styles.mb3,
-                    StyleUtils.getModalPaddingStyles({
-                        shouldAddBottomSafeAreaPadding: true,
-                        modalContainerStylePaddingBottom: 20,
-                        safeAreaPaddingBottom: props.insets.bottom,
-                    }),
-                ]}
+        <View style={[styles.flex1, styles.flexRow]}>
+            <View style={[
+                styles.flex1,
+                props.isSmallScreenWidth && styles.signInPageNarrowContentContainer,
+            ]}
             >
-                <View style={[
-                    styles.componentHeightLarge,
-                    ...(props.isSmallScreenWidth ? [styles.mb2] : [styles.mt6, styles.mb5]),
+                <SignInPageForm style={[
+                    styles.flex1,
+                    styles.alignSelfStretch,
+                    props.isSmallScreenWidth ? styles.ph5 : styles.ph4,
                 ]}
                 >
-                    <ExpensifyCashLogo
-                        width={variables.componentSizeLarge}
-                        height={variables.componentSizeLarge}
-                    />
+                    <LoginKeyboardAvoidingView
+                        behavior="position"
+                        contentContainerStyle={[
+                            props.isSmallScreenWidth ? styles.signInPageNarrowContentMargin : {},
+                            !props.isMediumScreenWidth ? styles.signInPageWideLeftContentMargin : {},
+                            styles.mb3,
+                            StyleUtils.getModalPaddingStyles({
+                                shouldAddBottomSafeAreaPadding: true,
+                                modalContainerStylePaddingBottom: 20,
+                                safeAreaPaddingBottom: props.insets.bottom,
+                            }),
+                        ]}
+                    >
+                        <View style={[
+                            styles.componentHeightLarge,
+                            ...(props.isSmallScreenWidth ? [styles.mb2] : [styles.mt6, styles.mb5]),
+                        ]}
+                        >
+                            <ExpensifyCashLogo
+                                width={variables.componentSizeLarge}
+                                height={variables.componentSizeLarge}
+                            />
+                        </View>
+                        {props.shouldShowWelcomeText && (
+                            <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                                {props.welcomeText}
+                            </Text>
+                        )}
+                        {props.children}
+                    </LoginKeyboardAvoidingView>
+                </SignInPageForm>
+                <View style={[styles.mb5, styles.alignSelfCenter, styles.ph5]}>
+                    <TermsAndLicenses />
                 </View>
-                {props.shouldShowWelcomeText && (
-                    <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
-                        {props.welcomeText}
-                    </Text>
-                )}
-                {props.children}
-            </LoginKeyboardAvoidingView>
-        </SignInPageForm>
-        <View style={[styles.mb5, styles.alignSelfCenter, props.isSmallScreenWidth && styles.signInPageNarrowContentContainer, styles.ph5]}>
-            <TermsAndLicenses />
+            </View>
         </View>
     </ScrollView>
 );