From 4d6c4bc70e3b5a82da3ec9f82a0f8c1736028599 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Mon, 13 Dec 2021 15:49:12 -0800
Subject: [PATCH] Fix copy button

---
 src/Room.jsx                 |  1 +
 src/Room.module.css          |  2 +-
 src/button/Button.module.css |  1 -
 src/button/CopyButton.jsx    | 11 +++++++++--
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/Room.jsx b/src/Room.jsx
index 9bc589dd..761fe0f2 100644
--- a/src/Room.jsx
+++ b/src/Room.jsx
@@ -314,6 +314,7 @@ function RoomSetupView({
           <CopyButton
             value={window.location.href}
             className={styles.copyButton}
+            copiedMessage="Call link copied"
           >
             Copy call link and join later
           </CopyButton>
diff --git a/src/Room.module.css b/src/Room.module.css
index 3c31183f..8292b428 100644
--- a/src/Room.module.css
+++ b/src/Room.module.css
@@ -108,7 +108,7 @@ limitations under the License.
 }
 
 .copyButton {
-  width: auto !important;
+  width: 320px !important;
 }
 
 .previewButtons > * {
diff --git a/src/button/Button.module.css b/src/button/Button.module.css
index d4d85ae1..ea233ea2 100644
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -138,7 +138,6 @@ limitations under the License.
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  flex: 1;
 }
 
 .copyButton svg {
diff --git a/src/button/CopyButton.jsx b/src/button/CopyButton.jsx
index 1f296662..d5d30210 100644
--- a/src/button/CopyButton.jsx
+++ b/src/button/CopyButton.jsx
@@ -4,7 +4,14 @@ import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
 import { Button } from "./Button";
 
-export function CopyButton({ value, children, onClassName, variant, ...rest }) {
+export function CopyButton({
+  value,
+  children,
+  onClassName,
+  variant,
+  copiedMessage,
+  ...rest
+}) {
   const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
 
   return (
@@ -18,7 +25,7 @@ export function CopyButton({ value, children, onClassName, variant, ...rest }) {
     >
       {isCopied ? (
         <>
-          {variant !== "icon" && <span>Copied!</span>}
+          {variant !== "icon" && <span>{copiedMessage || "Copied!"}</span>}
           <CheckIcon />
         </>
       ) : (