From 61176e8aa435d7e98fb1d5a7dbb00bb20c9f9636 Mon Sep 17 00:00:00 2001
From: JP Angelle <jp@k-f.co>
Date: Wed, 4 Oct 2023 10:21:04 -0500
Subject: [PATCH] handle overflow

---
 .../components/Portfolio/TokenListItem.tsx    | 34 +++++++------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/centrifuge-app/src/components/Portfolio/TokenListItem.tsx b/centrifuge-app/src/components/Portfolio/TokenListItem.tsx
index 59cad67eff..271bc96f0b 100644
--- a/centrifuge-app/src/components/Portfolio/TokenListItem.tsx
+++ b/centrifuge-app/src/components/Portfolio/TokenListItem.tsx
@@ -15,7 +15,7 @@ import {
 import { useTheme } from 'styled-components'
 import { usePool } from '../../utils/usePools'
 import { Eththumbnail } from '../EthThumbnail'
-import { Ellipsis, Root } from '../ListItemCardStyles'
+import { Root } from '../ListItemCardStyles'
 
 export type TokenCardProps = AccountTokenBalance
 
@@ -40,33 +40,25 @@ export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCar
             )}
           </Eththumbnail>
 
-          <Text as="h2" variant="body2" color="textPrimary">
-            <Ellipsis>{currency.name}</Ellipsis>
+          <Text textOverflow="ellipsis" variant="body2">
+            {currency.name}
           </Text>
         </Grid>
 
-        <Text as="span" variant="body2" color="textPrimary">
-          <Ellipsis>{formatBalance(balance, currency.symbol)}</Ellipsis>
+        <Text textOverflow="ellipsis" variant="body2">
+          {formatBalance(balance, currency.symbol)}
         </Text>
 
-        <Text as="span" variant="body2" color="textPrimary">
-          <Ellipsis>
-            {trancheInfo?.tokenPrice
-              ? formatBalance(trancheInfo.tokenPrice.toDecimal(), trancheInfo.currency.symbol, 4)
-              : '-'}
-          </Ellipsis>
+        <Text textOverflow="ellipsis" variant="body2">
+          {trancheInfo?.tokenPrice
+            ? formatBalance(trancheInfo.tokenPrice.toDecimal(), trancheInfo.currency.symbol, 4)
+            : '-'}
         </Text>
 
-        <Text as="span" variant="body2" color="textPrimary">
-          <Ellipsis>
-            {trancheInfo?.tokenPrice
-              ? formatBalance(
-                  balance.toDecimal().mul(trancheInfo.tokenPrice.toDecimal()),
-                  trancheInfo.currency.symbol,
-                  4
-                )
-              : '-'}
-          </Ellipsis>
+        <Text textOverflow="ellipsis" variant="body2">
+          {trancheInfo?.tokenPrice
+            ? formatBalance(balance.toDecimal().mul(trancheInfo.tokenPrice.toDecimal()), trancheInfo.currency.symbol, 4)
+            : '-'}
         </Text>
 
         <Shelf gap={2} justifySelf="end">