[PAY-2684] Fix wrap on audio wallet actions (#8073)

AudiusProject · Apr 11, 2024 · 61b37bc · 61b37bc
1 parent a08118c
commit 61b37bc
Showing 1 changed file with 25 additions and 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
@@ -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,24 +101,36 @@ 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}
           iconLeft={IconSend}
         >
           {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 && (