fix(components): fix nft image object fit

CHANGELOG.md

@@ -63,6 +63,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#1049](https://github.com/alleslabs/celatone-frontend/pull/1049) Change nft image ratio from cover to contain
 - [#1044](https://github.com/alleslabs/celatone-frontend/pull/1044) Fix incorrect formatted value in attached funds
 - [#1042](https://github.com/alleslabs/celatone-frontend/pull/1042) Fix bugbash for sequencer tier release
 - [#1029](https://github.com/alleslabs/celatone-frontend/pull/1029) Fix default wasm permission to permissionless

src/lib/components/nft/NftCard.tsx

@@ -38,7 +38,8 @@ export const NftCard = ({
             left={0}
             width="100%"
             height="100%"
-            objectFit="cover"
+            objectFit="contain"
+            background="gray.900"
             backgroundPosition="center"
             borderRadius="8px"
             src={metadata?.image}

src/lib/pages/nft-collections/components/CollectionCard.tsx

@@ -31,7 +31,8 @@ export const CollectionCard = ({ collectionInfo }: CollectionCardProps) => {
           minW={{ base: 28, md: 40 }}
           w={{ base: 28, md: 40 }}
           h={{ base: 28, md: 40 }}
-          objectFit="cover"
+          objectFit="contain"
+          background="gray.900"
           backgroundPosition="center"
           borderRadius="8px"
           src={metadata?.image}

src/lib/pages/nft-details/index.tsx

@@ -106,7 +106,12 @@ const NftDetailsBody = ({
           gap={{ base: 2, md: 8 }}
           mt={6}
         >
-          <Flex direction="column" gap={6} maxW={{ md: "360px" }}>
+          <Flex
+            direction="column"
+            gap={6}
+            minW={{ md: "360px" }}
+            maxW={{ md: "360px" }}
+          >
             {isMobile && (
               <Title
                 collectionAddress={collectionAddress}
@@ -132,9 +137,10 @@ const NftDetailsBody = ({
                   width: "100%",
                   height: "100%",
                   borderRadius: "8px",
-                  objectFit: "cover",
+                  objectFit: "contain",
                   backgroundPosition: "center",
                 }}
+                background="gray.900"
                 borderRadius="8px"
                 src={metadata?.image}
                 fallbackSrc={NFT_IMAGE_PLACEHOLDER}