ellipsis and spacing

centrifuge · Oct 4, 2023 · 7d2c2c9 · 7d2c2c9
1 parent b9b369b
commit 7d2c2c9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
@@ -9,6 +9,8 @@ import { SortButton } from '../SortButton'
 import { sortTokens } from './sortTokens'
 import { TokenListItem } from './TokenListItem'
 
+export const COLUMN_GAPS = '250px 180px 150px 180px'
+
 export const InvestedTokens = () => {
   const { search } = useLocation()
 
@@ -45,7 +47,7 @@ export const InvestedTokens = () => {
       </Text>
 
       <Box overflow="auto">
-        <Grid gridTemplateColumns="150px 150px 150px 150px" gap={3} alignItems="start" px={2}>
+        <Grid gridTemplateColumns={COLUMN_GAPS} gap={3} alignItems="start" px={2}>
           <Text as="span" variant="body3">
             Token
           </Text>

diff --git a/centrifuge-app/src/components/Portfolio/TokenListItem.tsx b/centrifuge-app/src/components/Portfolio/TokenListItem.tsx
@@ -12,13 +12,18 @@ import {
   Text,
   Thumbnail,
 } from '@centrifuge/fabric'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { usePool } from '../../utils/usePools'
 import { Eththumbnail } from '../EthThumbnail'
 import { Root } from '../ListItemCardStyles'
+import { COLUMN_GAPS } from './InvestedTokens'
 
 export type TokenCardProps = AccountTokenBalance
 
+const TokenName = styled(Text)`
+  text-wrap: nowrap;
+`
+
 export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCardProps) {
   const { sizes } = useTheme()
   const pool = usePool(poolId, false)
@@ -29,8 +34,8 @@ export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCar
   const icon = (trancheInfo?.poolMetadata as PoolMetadata).tranches?.[trancheId].icon?.uri
 
   return (
-    <Root as="article">
-      <Grid gridTemplateColumns="150px 150px 150px 150px 1fr" gap={3} p={2} alignItems="center">
+    <Root as="article" minWidth="1060px">
+      <Grid gridTemplateColumns={`${COLUMN_GAPS} 1fr`} gap={3} p={2} alignItems="center">
         <Grid as="header" gridTemplateColumns={`${sizes.iconMedium}px 1fr`} alignItems="center" gap={2}>
           <Eththumbnail show={isTinlakePool}>
             {icon ? (
@@ -40,9 +45,9 @@ export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCar
             )}
           </Eththumbnail>
 
-          <Text textOverflow="ellipsis" variant="body2">
+          <TokenName textOverflow="ellipsis" variant="body2">
             {currency.name}
-          </Text>
+          </TokenName>
         </Grid>
 
         <Text textOverflow="ellipsis" variant="body2">