Merge pull request #761 from alleslabs/fix/cfe-323-copy-button-toolti…

…p-alignment fix(components): fix tooltip alignment for copy button
alleslabs · Feb 1, 2024 · 5d654de · 5d654de
2 parents 8ad4eb3 + 334f954
commit 5d654de
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -54,6 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#761](https://github.com/alleslabs/celatone-frontend/pull/761) Fix copy button tooltip alignment
 - [#754](https://github.com/alleslabs/celatone-frontend/pull/754) Fix mobile guard incorrect behavior
 - [#751](https://github.com/alleslabs/celatone-frontend/pull/751) Fix fail txs should have no logs and remove stone-12-1
 

diff --git a/src/lib/components/copy/CopyTemplate.tsx b/src/lib/components/copy/CopyTemplate.tsx
@@ -27,8 +27,7 @@ export const CopyTemplate = ({
   return (
     <Tooltip isOpen={!isDisabled && hasCopied} label={copyLabel}>
       <Flex
-        display="inline"
-        direction="column"
+        display="inline-flex"
         onClick={(e) => {
           onCopy();
           e.stopPropagation();

diff --git a/src/lib/components/token/UnsupportedToken.tsx b/src/lib/components/token/UnsupportedToken.tsx
@@ -85,15 +85,22 @@ export const UnsupportedToken = ({ token }: { token: TokenWithValue }) => {
             amptrackSection="unsupported_token_copy"
           />
         </Flex>
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Text variant="body2" fontWeight="900">
+          {formatUTokenWithPrecision(token.amount, token.precision ?? 0, false)}
+        </Text>
         {!isMobile && (
-          <Text variant="body3" color="text.dark" my={{ base: 1, md: 0 }}>
+          <Text
+            variant="body3"
+            color="text.dark"
+            minW="fit-content"
+            my={{ base: 1, md: 0 }}
+          >
             {`${tokenType} Token`}
           </Text>
         )}
       </Flex>
-      <Text variant="body2" fontWeight="900">
-        {formatUTokenWithPrecision(token.amount, token.precision ?? 0, false)}
-      </Text>
     </Flex>
   );
 };