From 01101f7ab88cd6a3fe7309ca77185b02878c7f36 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Wed, 21 Feb 2024 12:13:03 +0100
Subject: [PATCH] Improve displaying balances containing different tokens

---
 .changelog/1283.trivial.md                           | 1 +
 src/app/components/Balance/RuntimeBalanceDisplay.tsx | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)
 create mode 100644 .changelog/1283.trivial.md

diff --git a/.changelog/1283.trivial.md b/.changelog/1283.trivial.md
new file mode 100644
index 000000000..66046e31f
--- /dev/null
+++ b/.changelog/1283.trivial.md
@@ -0,0 +1 @@
+Improve displaying balances containing different tokens
diff --git a/src/app/components/Balance/RuntimeBalanceDisplay.tsx b/src/app/components/Balance/RuntimeBalanceDisplay.tsx
index 0b3f70599..474d30e65 100644
--- a/src/app/components/Balance/RuntimeBalanceDisplay.tsx
+++ b/src/app/components/Balance/RuntimeBalanceDisplay.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { RuntimeSdkBalance } from '../../../oasis-nexus/api'
 import { useTranslation } from 'react-i18next'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
+import Box from '@mui/material/Box'
 
 export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefined }> = ({
   balances = [],
@@ -11,15 +12,15 @@ export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefin
     return t('common.missing')
   }
   return (
-    <>
+    <Box>
       {balances.map(balance => (
-        <span key={balance.token_symbol}>
+        <div key={balance.token_symbol}>
           {t('common.valueInToken', {
             ...getPreciseNumberFormat(balance.balance),
             ticker: balance.token_symbol,
           })}
-        </span>
+        </div>
       ))}
-    </>
+    </Box>
   )
 }