fix(components): fix tooltip alignment for copy button

CHANGELOG.md

@@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#671](https://github.com/alleslabs/celatone-frontend/pull/671) 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
 

src/lib/components/copy/Copier.tsx

@@ -1,4 +1,4 @@
-import type { IconProps, LayoutProps } from "@chakra-ui/react";
+import { Flex, type IconProps, type LayoutProps } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
 import { trackUseCopier } from "lib/amplitude";
@@ -26,18 +26,20 @@ export const Copier = ({
     value={value}
     copyLabel={copyLabel}
     triggerElement={
-      <CustomIcon
-        id={type}
-        className="copier"
-        display={display}
-        cursor="pointer"
-        m={0}
-        marginLeft={ml}
-        onClick={() => trackUseCopier(type, amptrackSection)}
-        name="copy"
-        boxSize={3}
-        color="gray.600"
-      />
+      <Flex>
+        <CustomIcon
+          id={type}
+          className="copier"
+          display={display}
+          cursor="pointer"
+          m={0}
+          marginLeft={ml}
+          onClick={() => trackUseCopier(type, amptrackSection)}
+          name="copy"
+          boxSize={3}
+          color="gray.600"
+        />
+      </Flex>
     }
   />
 );

src/lib/components/copy/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
 import type { BoxProps, ButtonProps } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
@@ -42,31 +42,33 @@ export const CopyButton = ({
     ml={ml}
     w={w}
     triggerElement={
-      <Button
-        w={w}
-        isDisabled={isDisable}
-        variant={variant}
-        size={size}
-        float="right"
-        onClick={() =>
-          track(AmpEvent.USE_COPY_BUTTON, {
-            section: amptrackSection,
-            subSection: amptrackSubSection,
-            info: amptrackInfo,
-          })
-        }
-        {...buttonProps}
-        borderRadius={size === "xs" ? 6 : 8}
-      >
-        {hasIcon && (
-          <CustomIcon
-            name="copy"
-            boxSize={size === "xs" ? 3 : 4}
-            mr={iconGap}
-          />
-        )}
-        {buttonText}
-      </Button>
+      <Flex>
+        <Button
+          w={w}
+          isDisabled={isDisable}
+          variant={variant}
+          size={size}
+          float="right"
+          onClick={() =>
+            track(AmpEvent.USE_COPY_BUTTON, {
+              section: amptrackSection,
+              subSection: amptrackSubSection,
+              info: amptrackInfo,
+            })
+          }
+          {...buttonProps}
+          borderRadius={size === "xs" ? 6 : 8}
+        >
+          {hasIcon && (
+            <CustomIcon
+              name="copy"
+              boxSize={size === "xs" ? 3 : 4}
+              mr={iconGap}
+            />
+          )}
+          {buttonText}
+        </Button>
+      </Flex>
     }
   />
 );