From 1d48e950e8f2962cf00b9aed0f6cb4767e5df4ea Mon Sep 17 00:00:00 2001
From: Matthias Le Brun <bloodyowl@icloud.com>
Date: Wed, 13 Dec 2023 18:03:28 +0100
Subject: [PATCH] Make New transfer button full width on mobile (#496)

Closes FRONT-797
---
 clients/banking/src/pages/TransferPage.tsx | 37 +++++++++++++++-------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/clients/banking/src/pages/TransferPage.tsx b/clients/banking/src/pages/TransferPage.tsx
index 5f3bdc7aa..5a8e71986 100644
--- a/clients/banking/src/pages/TransferPage.tsx
+++ b/clients/banking/src/pages/TransferPage.tsx
@@ -22,6 +22,11 @@ const styles = StyleSheet.create({
     paddingTop: 40,
     paddingHorizontal: 40,
   },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+  },
 });
 
 type Props = {
@@ -46,19 +51,27 @@ export const TransferPage = ({
       {({ small }) => (
         <>
           {transferCreationVisible ? (
-            <Box
-              direction="row"
-              justifyContent="end"
-              style={small ? styles.container : styles.containerDesktop}
-            >
-              <LakeButton
-                onPress={() => Router.push("AccountPaymentsNew", { accountMembershipId })}
-                icon="add-circle-filled"
-                size="small"
-                color="current"
+            <Box direction="row">
+              <ResponsiveContainer
+                breakpoint={breakpoints.small}
+                style={[
+                  styles.buttonContainer,
+                  commonStyles.fill,
+                  small ? styles.container : styles.containerDesktop,
+                ]}
               >
-                {t("transfer.newTransfer")}
-              </LakeButton>
+                {({ small }) => (
+                  <LakeButton
+                    grow={small}
+                    onPress={() => Router.push("AccountPaymentsNew", { accountMembershipId })}
+                    icon="add-circle-filled"
+                    size="small"
+                    color="current"
+                  >
+                    {t("transfer.newTransfer")}
+                  </LakeButton>
+                )}
+              </ResponsiveContainer>
             </Box>
           ) : null}