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 (
-
- }
- className={styles.avatar}
- />
-
-
{name}
-
{roomId}
- {participants &&
}
-
+
+
+
}
+ className={styles.avatar}
+ />
+
+
{name}
+
{roomId}
+ {participants &&
}
+
+
+
-
+
);
}
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";