From 7d8a515a8aadb65939a85d733ced1984752325bf Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 3 Aug 2023 17:45:24 +0700
Subject: [PATCH] fix: fix icns names and contract address alignment

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/ContractSelectSection.tsx  |  1 +
 src/lib/components/ExplorerLink.tsx           |  1 -
 src/lib/components/PrimaryNameMark.tsx        |  2 +-
 .../components/AccountHeader.tsx              | 34 +++++++++----------
 5 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c68adab3a..76fbf31c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#460](https://github.com/alleslabs/celatone-frontend/pull/460) Fix icns names and contract address alignment
 - [#459](https://github.com/alleslabs/celatone-frontend/pull/459) Fix contract txs by using contract account id instead of contract address
 - [#456](https://github.com/alleslabs/celatone-frontend/pull/456) Fix pool count chip in pool transaction table
 - [#454](https://github.com/alleslabs/celatone-frontend/pull/454) Fix contract selection loading state for other folders
diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
index abca83ca1..6f242d2f3 100644
--- a/src/lib/components/ContractSelectSection.tsx
+++ b/src/lib/components/ContractSelectSection.tsx
@@ -209,6 +209,7 @@ export const ContractSelectSection = observer(
                 maxWidth="none"
                 minWidth={style.contractAddrW}
                 wordBreak="break-all"
+                fixedHeight={false}
               />
             ) : (
               <Text color="text.disabled" variant="body2">
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 3b48fbe85..ecec72e40 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -128,7 +128,6 @@ const LinkRender = ({
       pointerEvents={hrefLink ? "auto" : "none"}
       wordBreak={{ base: "break-all", md: "inherit" }}
       display={{ base: "inline", md: "flex" }}
-      align={{ base: "start", md: "center" }}
     >
       {textValue}
     </Text>
diff --git a/src/lib/components/PrimaryNameMark.tsx b/src/lib/components/PrimaryNameMark.tsx
index 8ad8a330a..d1676eabe 100644
--- a/src/lib/components/PrimaryNameMark.tsx
+++ b/src/lib/components/PrimaryNameMark.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from "lib/components/Tooltip";
 
 export const PrimaryNameMark = () => (
   <Tooltip label="Primary name">
-    <div style={{ display: "flex" }}>
+    <div>
       <CustomIcon name="star-solid" color="accent.main" boxSize={3} m={0} />
     </div>
   </Tooltip>
diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
index 1d2d6a885..8cbdd4bbc 100644
--- a/src/lib/pages/account-details/components/AccountHeader.tsx
+++ b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -63,24 +63,24 @@ export const AccountHeader = ({
           </Text>
           <Flex gap={1} align="center">
             {icnsName.names.map((name) => (
-              <div key={name}>
+              <Flex
+                key={name}
+                align="center"
+                direction="row"
+                _after={{
+                  content: '"/"',
+                  fontSize: "14px",
+                }}
+                _last={{
+                  _after: {
+                    display: "none",
+                  },
+                }}
+                gap={1}
+              >
                 {name === icnsName.primary_name && <PrimaryNameMark />}
-                <CopyLink
-                  value={name}
-                  type="icns_names"
-                  withoutIcon
-                  _after={{
-                    content: '"/"',
-                    fontSize: "14px",
-                    ml: 1,
-                  }}
-                  _last={{
-                    _after: {
-                      display: "none",
-                    },
-                  }}
-                />
-              </div>
+                <CopyLink value={name} type="icns_names" withoutIcon />
+              </Flex>
             ))}
           </Flex>
         </Flex>