From 164c6388e413da3f811dc12839ce8701315fef49 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 26 Jul 2024 12:11:00 +0700
Subject: [PATCH 1/2] fix(components): fix nft image object fit

---
 CHANGELOG.md                                           |  1 +
 src/lib/components/nft/NftCard.tsx                     |  3 ++-
 .../nft-collections/components/CollectionCard.tsx      |  3 ++-
 src/lib/pages/nft-details/index.tsx                    | 10 ++++++++--
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 118f03625..5cceb7abe 100644
--- a/CHANGELOG.md
+++ b/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 conver 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
diff --git a/src/lib/components/nft/NftCard.tsx b/src/lib/components/nft/NftCard.tsx
index aceec9de6..abb037b09 100644
--- a/src/lib/components/nft/NftCard.tsx
+++ b/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}
diff --git a/src/lib/pages/nft-collections/components/CollectionCard.tsx b/src/lib/pages/nft-collections/components/CollectionCard.tsx
index 51dddecbb..9494a8150 100644
--- a/src/lib/pages/nft-collections/components/CollectionCard.tsx
+++ b/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}
diff --git a/src/lib/pages/nft-details/index.tsx b/src/lib/pages/nft-details/index.tsx
index 1a78bab22..8ba4bc523 100644
--- a/src/lib/pages/nft-details/index.tsx
+++ b/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}

From 0c4c5870891e23e49b189e23ae11306d1746da22 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 26 Jul 2024 12:26:14 +0700
Subject: [PATCH 2/2] fix(components): fix typo

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5cceb7abe..a4e2e7571 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -63,7 +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 conver to contain
+- [#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