Update NFTs page to match design

trilitech · Oct 7, 2023 · ebab46a · ebab46a
1 parent f7d6167
commit ebab46a
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/views/nfts/NFTCard.tsx b/src/views/nfts/NFTCard.tsx
@@ -1,4 +1,4 @@
-import { AspectRatio, Image, Card, CardBody, Heading, Text } from "@chakra-ui/react";
+import { AspectRatio, Image, Card, CardBody, Heading, Text, Box } from "@chakra-ui/react";
 import { NFTBalance } from "../../types/TokenBalance";
 import { getIPFSurl } from "../../utils/token/nftUtils";
 import { thumbnailUri } from "../../types/Token";
@@ -16,7 +16,7 @@ const NFTCard: React.FC<{ owner: RawPkh; nft: NFTBalance; onClick: () => void }>
   const name = nft.metadata.name;
 
   return (
-    <Card cursor="pointer" data-testid="nft-card" onClick={onClick}>
+    <Card cursor="pointer" data-testid="nft-card" borderRadius="8px" onClick={onClick}>
       <CardBody bg={colors.gray[900]} borderRadius="8px">
         <AspectRatio width="100%" ratio={1}>
           <Image data-testid="nft-image" width="100%" src={url} fallbackSrc={fallbackUrl} />
@@ -36,9 +36,18 @@ const NFTCard: React.FC<{ owner: RawPkh; nft: NFTBalance; onClick: () => void }>
             {"x" + nft.balance}
           </Text>
         )}
-        <Heading mt="15px" mb="8px" fontSize="sm">
-          {name}
-        </Heading>
+        <Box overflow="hidden">
+          <Heading
+            mt="15px"
+            mb="8px"
+            whiteSpace="nowrap"
+            overflow="hidden"
+            textOverflow="ellipsis"
+            fontSize="sm"
+          >
+            {name}
+          </Heading>
+        </Box>
 
         <AddressPill address={parsePkh(owner)} />
       </CardBody>