Ensure only the copyable element itself is hover-able/click-able

explorer/src/components/AccountsCard.tsx

@@ -148,7 +148,7 @@ const renderAccountRow = (account: Account) => {
     balance = `◎${(1.0 * account.lamports) / LAMPORTS_PER_SOL}`;
   }
 
-  const base58AccountPubkey = account.pubkey.toBase58()
+  const base58AccountPubkey = account.pubkey.toBase58();
   return (
     <tr key={account.id}>
       <td>

explorer/src/components/Copyable.tsx

@@ -1,9 +1,9 @@
 import React, { useState, ReactNode } from "react";
 
 type CopyableProps = {
-  text: string
+  text: string;
-  children: ReactNode
+  children: ReactNode;
-}
+};
 
 const popover = (
   <div className="popover fade bs-popover-right show">
@@ -17,20 +17,17 @@ function Copyable({ text, children }: CopyableProps) {
 
   const copyToClipboard = () => navigator.clipboard.writeText(text);
   const handleClick = () =>
-    copyToClipboard()
+    copyToClipboard().then(() => {
-      .then(() => {
+      setShowPopover(true);
-        setShowPopover(true);
+      setTimeout(setShowPopover.bind(null, false), 2500);
-        setTimeout(setShowPopover.bind(null, false), 2500);
+    });
-      });
 
   return (
     <div className="copyable">
-      <div onClick={handleClick}>
+      <div onClick={handleClick}>{children}</div>
-        {children}
-      </div>
       {showPopover && popover}
     </div>
   );
 }
 
-export default Copyable;
+export default Copyable;

explorer/src/scss/_solana.scss

@@ -13,7 +13,7 @@ code {
 .copyable {
   position: relative;
 
-  &:hover {
+  & > div:hover {
     cursor: pointer;
   }