From 61b37bc3852bca59a8b72525536c1d4fe0d2e403 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Wed, 10 Apr 2024 17:03:52 -0700
Subject: [PATCH] [PAY-2684] Fix wrap on audio wallet actions (#8073)

---
 .../components/WalletManagementTile.tsx       | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx b/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx
index 0ad086f802b..b455e518eed 100644
--- a/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx
@@ -21,7 +21,8 @@ import {
   IconLogoLinkByStripe,
   IconLogoCoinbasePay,
   Text,
-  IconWallet
+  IconWallet,
+  Box
 } from '@audius/harmony'
 import BN from 'bn.js'
 import { push as pushRoute } from 'connected-react-router'
@@ -70,7 +71,7 @@ const messages = {
 }
 
 const OptionButton = (props: ButtonProps) => {
-  return <Button variant='secondary' size='small' fullWidth {...props} />
+  return <Button variant='secondary' size='small' minWidth={150} fullWidth {...props} />
 }
 
 const WalletActions = () => {
@@ -100,8 +101,8 @@ const WalletActions = () => {
   }, [dispatch])
 
   return (
-    <div className={styles.moreOptionsSection}>
-      <Flex gap='m' w='100%' wrap={isMobileWeb() ? 'wrap' : undefined}>
+    <Flex gap='m' wrap='wrap' justifyContent='center'>
+      <Box flex={1}>
         <OptionButton
           disabled={!hasBalance}
           onClick={onClickSend}
@@ -109,15 +110,27 @@ const WalletActions = () => {
         >
           {messages.sendLabel}
         </OptionButton>
-        <OptionButton onClick={onClickReceive} iconLeft={IconReceive}>
+      </Box>
+      <Box flex={1}>
+        <OptionButton
+          onClick={onClickReceive}
+          iconLeft={IconReceive}
+        >
           {messages.receiveLabel}
         </OptionButton>
-        <OptionButton onClick={onClickTransactions} iconLeft={IconTransaction}>
+      </Box>
+      <Box flex={1}>
+        <OptionButton
+          onClick={onClickTransactions}
+          iconLeft={IconTransaction}
+        >
           {messages.transactionsLabel}
         </OptionButton>
+      </Box>
+      <Box flex={1}>
         <ManageWalletsButton />
-      </Flex>
-    </div>
+      </Box>
+    </Flex>
   )
 }
 
@@ -263,7 +276,10 @@ const ManageWalletsButton = () => {
 
   return (
     <>
-      <OptionButton onClick={onClickConnectWallets} iconLeft={IconWallet}>
+      <OptionButton
+        onClick={onClickConnectWallets}
+        iconLeft={IconWallet}
+      >
         {messages.externalWallets}
       </OptionButton>
       {isMobile && (