From 5671e36517609466dc91a30a34b0d984b69e3faf Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 18 Sep 2023 05:17:49 +0530
Subject: [PATCH 1/8] Make the footer button part of the ScrollView in 2FA
 Verify Step

This makes the Footer button a child of the ScrollView container.
The footer button will now be scrollable below the content.
---
 .../TwoFactorAuth/Steps/VerifyStep.js         | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 8c3d9689cfcd..01258f8dff3b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -110,20 +110,20 @@ function VerifyStep({account = defaultAccount}) {
                 <View style={[styles.mt3, styles.mh5]}>
                     <TwoFactorAuthForm innerRef={formRef} />
                 </View>
+                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                    <Button
+                        success
+                        text={translate('common.next')}
+                        isLoading={account.isLoading}
+                        onPress={() => {
+                            if (!formRef.current) {
+                                return;
+                            }
+                            formRef.current.validateAndSubmitForm();
+                        }}
+                    />
+                </FixedFooter>
             </ScrollView>
-            <FixedFooter style={[styles.mtAuto, styles.pt2]}>
-                <Button
-                    success
-                    text={translate('common.next')}
-                    isLoading={account.isLoading}
-                    onPress={() => {
-                        if (!formRef.current) {
-                            return;
-                        }
-                        formRef.current.validateAndSubmitForm();
-                    }}
-                />
-            </FixedFooter>
         </StepWrapper>
     );
 }

From c278d80cc4b424f1aa77a73aa8ec636e37a2e8b7 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 18 Sep 2023 05:23:59 +0530
Subject: [PATCH 2/8] Make ScrollView take all the available space on the page

This is achieved by adding the container style flexGrow1 to the ScrollView.
This makes the footer button sit at the bottom of the page for large screens.
---
 src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 01258f8dff3b..75926c84d932 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -78,6 +78,7 @@ function VerifyStep({account = defaultAccount}) {
             <ScrollView
                 style={styles.mb5}
                 keyboardShouldPersistTaps="handled"
+                contentContainerStyle={styles.flexGrow1}
             >
                 <View style={[styles.ph5, styles.mt3]}>
                     <Text>

From 877cb2ad59705481d3d3d0361a78251fdef276d1 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 18 Sep 2023 06:20:27 +0530
Subject: [PATCH 3/8] Remove bottom padding of scrollView

---
 src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 75926c84d932..9f617f75e40c 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -76,7 +76,6 @@ function VerifyStep({account = defaultAccount}) {
             onEntryTransitionEnd={() => formRef.current && formRef.current.focus()}
         >
             <ScrollView
-                style={styles.mb5}
                 keyboardShouldPersistTaps="handled"
                 contentContainerStyle={styles.flexGrow1}
             >

From 8c029537213d43567c1d5878fa6e7a7ccee37035 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 18 Sep 2023 06:23:19 +0530
Subject: [PATCH 4/8] Adjust padding of the footer button

This adds a top padding of 20px to the footer button (it already has a bottom padding of 20px)
This mirrors the padding of other buttons in the App
---
 src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 9f617f75e40c..eb08a8da316b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -110,7 +110,7 @@ function VerifyStep({account = defaultAccount}) {
                 <View style={[styles.mt3, styles.mh5]}>
                     <TwoFactorAuthForm innerRef={formRef} />
                 </View>
-                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                     <Button
                         success
                         text={translate('common.next')}

From 079b59435e30a378f7dc53def3c6a4d814d159d2 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 18 Sep 2023 06:26:29 +0530
Subject: [PATCH 5/8] Make the footer button part of the ScrollView in 2FA
 Codes Step

This makes the Footer button a child of the ScrollView container.
The effect will be that the footer button will now be scrollable below the content.
---
 .../Security/TwoFactorAuth/Steps/CodesStep.js    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 52d7a9806f69..538bcfa8c08e 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -104,15 +104,15 @@ function CodesStep({account = defaultAccount}) {
                         )}
                     </View>
                 </Section>
+                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                    <Button
+                        success
+                        text={translate('common.next')}
+                        onPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY)}
+                        isDisabled={!account.codesAreCopied}
+                    />
+                </FixedFooter>
             </ScrollView>
-            <FixedFooter style={[styles.mtAuto, styles.pt2]}>
-                <Button
-                    success
-                    text={translate('common.next')}
-                    onPress={() => setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY)}
-                    isDisabled={!account.codesAreCopied}
-                />
-            </FixedFooter>
         </StepWrapper>
     );
 }

From 4db83749f355b0970f3846626cdfbd2a646ca1bd Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 18 Sep 2023 06:36:10 +0530
Subject: [PATCH 6/8] Adjust padding of footer button in 2FA Codes Step

This adds a top padding of 20 px to footer button, mirroring the padding of other buttons in the App
---
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 538bcfa8c08e..e0afb470dade 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -104,7 +104,7 @@ function CodesStep({account = defaultAccount}) {
                         )}
                     </View>
                 </Section>
-                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                     <Button
                         success
                         text={translate('common.next')}

From 08b3e44814f6c022740500cb2e04e79979a1f11e Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Mon, 18 Sep 2023 06:37:10 +0530
Subject: [PATCH 7/8] Make ScrollView take all the available space on the page
 in 2FA Codes Step

We achieve this by adding the container style flexGrow1 to the ScrollView
---
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index e0afb470dade..578f97c6042f 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -47,7 +47,7 @@ function CodesStep({account = defaultAccount}) {
                 total: 3,
             }}
         >
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <Section
                     title={translate('twoFactorAuth.keepCodesSafe')}
                     icon={Illustrations.ShieldYellow}

From c922f5c45e6bc7b6913b11d2e814556c35be97bd Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Thu, 21 Sep 2023 01:44:35 +0530
Subject: [PATCH 8/8] Make button part of content on ContactMethods Page

This was achieved by adding the button to the parent ScrollView (and changing the style to styles.mtAuto (this aligns it to the end of the container.
The parent ScrollView is given a style of flexGrow1 to make sure it takes up all the space available.
---
 .../Profile/Contacts/ContactMethodsPage.js     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index 62e62183a156..e25feaa3c543 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -116,7 +116,7 @@ function ContactMethodsPage(props) {
                 title={props.translate('contacts.contactMethods')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <View style={[styles.ph5, styles.mv3, styles.flexRow, styles.flexWrap]}>
                     <Text>
                         {props.translate('contacts.helpTextBeforeEmail')}
@@ -128,15 +128,15 @@ function ContactMethodsPage(props) {
                     </Text>
                 </View>
                 {loginMenuItems}
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
+                    <Button
+                        success
+                        text={props.translate('contacts.newContactMethod')}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
+                        pressOnEnter
+                    />
+                </FixedFooter>
             </ScrollView>
-            <FixedFooter style={[styles.flexGrow0, styles.pt5]}>
-                <Button
-                    success
-                    text={props.translate('contacts.newContactMethod')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
-                    pressOnEnter
-                />
-            </FixedFooter>
         </ScreenWrapper>
     );
 }