From 10f14464158b93052e2312b85fe06b8ebab4f364 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 10 Dec 2021 14:01:55 -0800
Subject: [PATCH] Fix call tile copy button

---
 src/CallList.jsx          | 31 +++++++++++++++++--------------
 src/CallList.module.css   | 19 ++++++++++++++++---
 src/button/CopyButton.jsx |  2 +-
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/CallList.jsx b/src/CallList.jsx
index efb781dc..2f206bdf 100644
--- a/src/CallList.jsx
+++ b/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}>
-      <Avatar
-        size="md"
-        bgKey={name}
-        src={avatarUrl}
-        fallback={<VideoIcon width={16} height={16} />}
-        className={styles.avatar}
-      />
-      <div className={styles.callInfo}>
-        <h5>{name}</h5>
-        <p>{roomId}</p>
-        {participants && <Facepile participants={participants} />}
-      </div>
+    <div className={styles.callTile}>
+      <Link to={`/room/${roomId}`} className={styles.callTileLink}>
+        <Avatar
+          size="md"
+          bgKey={name}
+          src={avatarUrl}
+          fallback={<VideoIcon width={16} height={16} />}
+          className={styles.avatar}
+        />
+        <div className={styles.callInfo}>
+          <h5>{name}</h5>
+          <p>{roomId}</p>
+          {participants && <Facepile participants={participants} />}
+        </div>
+        <div className={styles.copyButtonSpacer} />
+      </Link>
       <CopyButton
         className={styles.copyButton}
         variant="icon"
         value={getRoomUrl(roomId)}
       />
-    </Link>
+    </div>
   );
 }
diff --git a/src/CallList.module.css b/src/CallList.module.css
index 4cffe4ba..1d2b62b5 100644
--- a/src/CallList.module.css
+++ b/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));
diff --git a/src/button/CopyButton.jsx b/src/button/CopyButton.jsx
index f4f6560d..7b2829bf 100644
--- a/src/button/CopyButton.jsx
+++ b/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";