fix: fix icns names and contract address alignment

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

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">

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>

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>

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>