Fix call tile copy button

src/CallList.jsx

@@ -28,24 +28,27 @@ export function CallList({ title, rooms }) {
 
 function CallTile({ name, avatarUrl, roomId, participants }) {
   return (
-    <Link to={`/room/${roomId}`} className={styles.callTile}>
+    <div className={styles.callTile}>
-      <Avatar
+      <Link to={`/room/${roomId}`} className={styles.callTileLink}>
-        size="md"
+        <Avatar
-        bgKey={name}
+          size="md"
-        src={avatarUrl}
+          bgKey={name}
-        fallback={<VideoIcon width={16} height={16} />}
+          src={avatarUrl}
-        className={styles.avatar}
+          fallback={<VideoIcon width={16} height={16} />}
-      />
+          className={styles.avatar}
-      <div className={styles.callInfo}>
+        />
-        <h5>{name}</h5>
+        <div className={styles.callInfo}>
-        <p>{roomId}</p>
+          <h5>{name}</h5>
-        {participants && <Facepile participants={participants} />}
+          <p>{roomId}</p>
-      </div>
+          {participants && <Facepile participants={participants} />}
+        </div>
+        <div className={styles.copyButtonSpacer} />
+      </Link>
       <CopyButton
         className={styles.copyButton}
         variant="icon"
         value={getRoomUrl(roomId)}
       />
-    </Link>
+    </div>
   );
 }

src/CallList.module.css

@@ -1,17 +1,23 @@
 .callTile {
-  display: flex;
   min-width: 240px;
   height: 94px;
   padding: 12px;
-  text-decoration: none;
   background-color: var(--bgColor2);
   border-radius: 8px;
   overflow: hidden;
   box-sizing: border-box;
+  position: relative;
+  user-select: none;
+}
+
+.callTileLink {
+  display: flex;
+  text-decoration: none;
+  width: 100%;
 }
 
 .avatar,
-.copyButton {
+.copyButtonSpacer {
   flex-shrink: 0;
 }
 
@@ -49,11 +55,18 @@
   white-space: nowrap;
 }
 
+.copyButtonSpacer,
 .copyButton {
   width: 16px;
   height: 16px;
 }
 
+.copyButton {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+
 .callList {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

src/button/CopyButton.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import useClipboard from "react-use-clipboard";
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import { ReactComponent as CopyIcon } from "../icons/Copy.svg";