LIVE-1461 end of coin name hidden if too long so it doesn t overlap o…

…n coin price (#4811) * LIVE-1461 end of coin name hidden if too long so it doesn t overlap on coin price * LIVE-1461 end of coin name hidden if too long so it doesn t overlap on coin price * LIVE-1461 coin name cell size modified
LedgerHQ · Mar 4, 2022 · d6003e9 · d6003e9 · github-actions · Mar 4, 2022
1 parent c145cc5
commit d6003e9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/renderer/screens/market/MarketList.tsx b/src/renderer/screens/market/MarketList.tsx
@@ -127,11 +127,11 @@ export const TableRow = styled(Flex).attrs({
     padding-left: 5px;
   }
   ${TableCellBase}:nth-child(2) {
-    flex: 1 0 250px;
+    flex: 1 0 230px;
     justify-content: flex-start;
   }
   ${TableCellBase}:nth-child(3) {
-    flex: 1 0 150px;
+    flex: 1 0 80px;
     justify-content: flex-end;
   }
   ${TableCellBase}:nth-child(4) {

diff --git a/src/renderer/screens/market/MarketRowItem.tsx b/src/renderer/screens/market/MarketRowItem.tsx
@@ -145,7 +145,7 @@ function MarketRowItem({
       ) : (
         <TableRow onClick={onCurrencyClick}>
           <TableCell>{currency?.marketcapRank ?? "-"}</TableCell>
-          <TableCell>
+          <TableCell overflow="hidden" mr={3}>
             <CryptoCurrencyIconWrapper>
               {currency.internalCurrency ? (
                 <CryptoCurrencyIcon
@@ -160,7 +160,7 @@ function MarketRowItem({
                 <img width="32px" height="32px" src={currency.image} alt={"currency logo"} />
               )}
             </CryptoCurrencyIconWrapper>
-            <Flex pl={3} flexDirection="row" alignItems="center">
+            <Flex pl={3} flexDirection="row" alignItems="center" overflow="hidden">
               <Flex flexDirection="column" alignItems="left" pr={2}>
                 <Text variant="body">{currency.name}</Text>
                 <Text variant="small" color="neutral.c60">