Fix/floating tooltip

CHANGELOG.md

@@ -107,6 +107,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#118](https://github.com/alleslabs/celatone-frontend/pull/118) Fix floating tooltip when scrolling out of copy button
 - [#111](https://github.com/alleslabs/celatone-frontend/pull/111) Fix recent activities navigation and instantiate encode/decode
 - [#105](https://github.com/alleslabs/celatone-frontend/pull/105) Propoerly show instantiator of code contracts and contract in the instantiated list
 - [#42](https://github.com/alleslabs/celatone-frontend/pull/42) Properly show CTAs on contract-list page and edit zero/disconnected state

src/lib/components/Copier.tsx

@@ -1,13 +1,21 @@
 import { CopyIcon } from "@chakra-ui/icons";
+import type { LayoutProps } from "@chakra-ui/react";
 import { Tooltip, useClipboard } from "@chakra-ui/react";
 import { useEffect } from "react";
 
 interface CopierProps {
   value: string;
   ml?: string;
+  className?: string;
+  display?: LayoutProps["display"];
 }
 
-export const Copier = ({ value, ml = "8px" }: CopierProps) => {
+export const Copier = ({
+  value,
+  ml = "8px",
+  className,
+  display = "flex",
+}: CopierProps) => {
   const { onCopy, hasCopied, setValue } = useClipboard(value);
 
   useEffect(() => setValue(value), [value, setValue]);
@@ -21,17 +29,20 @@ export const Copier = ({ value, ml = "8px" }: CopierProps) => {
       arrowSize={8}
       bg="primary.dark"
     >
-      <CopyIcon
-        display="flex"
-        boxSize="16px"
-        color="text.dark"
-        cursor="pointer"
-        marginLeft={ml}
-        onClick={(e) => {
-          e.stopPropagation();
-          onCopy();
-        }}
-      />
+      <div>
+        <CopyIcon
+          className={className}
+          display={display}
+          boxSize="16px"
+          color="text.dark"
+          cursor="pointer"
+          marginLeft={ml}
+          onClick={(e) => {
+            e.stopPropagation();
+            onCopy();
+          }}
+        />
+      </div>
     </Tooltip>
   );
 };

src/lib/components/ExplorerLink.tsx

@@ -139,14 +139,16 @@ export const ExplorerLink = ({
 
   return (
     <Box
-      role="group"
       display="inline-flex"
       alignItems="center"
       _hover={{
         ...(!readOnly && {
           textDecoration: "underline",
           textDecorationColor: "primary.main",
         }),
+        "& .copy-button": {
+          display: "flex",
+        },
       }}
       {...componentProps}
     >
@@ -161,13 +163,12 @@ export const ExplorerLink = ({
             isEllipsis={textFormat === "ellipsis"}
             maxWidth={maxWidth}
           />
-          <Box
-            alignItems="center"
-            display={canCopyWithHover ? "none" : undefined}
-            _groupHover={canCopyWithHover ? { display: "flex" } : undefined}
-          >
-            <Copier value={copyValue || value} ml="8px" />
-          </Box>
+          <Copier
+            value={copyValue || value}
+            ml="8px"
+            className="copy-button"
+            display={canCopyWithHover ? "none" : "flex"}
+          />
         </>
       )}
     </Box>