docs: share tweak copy button

packages/web/src/components/share/content-markdown.tsx

@@ -42,7 +42,6 @@ export function ContentMarkdown(props: Props) {
       class={style.root}
       data-highlight={props.highlight === true ? true : undefined}
       data-expanded={expanded() || props.expand === true ? true : undefined}
-      style={{ position: "relative" }}
     >
       <div data-slot="markdown" ref={overflow.ref} innerHTML={html()} />
 

packages/web/src/components/share/content-text.tsx

@@ -1,7 +1,6 @@
 import style from "./content-text.module.css"
 import { createSignal } from "solid-js"
 import { createOverflow } from "./common"
-import { CopyButton } from "./copy-button"
 
 interface Props {
   text: string
@@ -17,7 +16,6 @@ export function ContentText(props: Props) {
       class={style.root}
       data-expanded={expanded() || props.expand === true ? true : undefined}
       data-compact={props.compact === true ? true : undefined}
-      style={{ position: "relative" }}
     >
       <pre data-slot="text" ref={overflow.ref}>
         {props.text}
@@ -32,7 +30,6 @@ export function ContentText(props: Props) {
           {expanded() ? "Show less" : "Show more"}
         </button>
       )}
-      <CopyButton text={props.text} />
     </div>
   )
 }

packages/web/src/components/share/copy-button.module.css

@@ -1,47 +1,31 @@
-.copyButtonWrapper {
+.root {
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s ease;
-}
 
-.copyButton {
-  width: 18px;
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--sl-color-text-secondary);
+  button {
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0.125rem;
+    background-color: var(--sl-color-bg);
+    color: var(--sl-color-text-secondary);
 
-  svg {
-    display: block;
-    width: 16px;
-    height: 16px;
-  }
+    svg {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+    }
 
-  &[data-copied="true"] {
-    color: var(--sl-color-green-high);
+    &[data-copied="true"] {
+      color: var(--sl-color-green-high);
+    }
   }
 }
 
 /* Show copy button when parent is hovered */
-*:hover > .copyButtonWrapper {
-  opacity: 0.65;
+*:hover > .root {
+  opacity: 1;
   visibility: visible;
 }
-
-.copyTooltip {
-  position: absolute;
-  top: 50%;
-  left: calc(100% + 12px);
-  transform: translate(0, -50%);
-  padding: 0.375em 0.5em;
-  background: var(--sl-color-white);
-  color: var(--sl-color-text-invert);
-  font-size: 0.6875rem;
-  border-radius: 7px;
-  white-space: nowrap;
-  z-index: 11;
-}

packages/web/src/components/share/copy-button.tsx

@@ -11,7 +11,8 @@ export function CopyButton(props: CopyButtonProps) {
 
   function handleCopyClick() {
     if (props.text) {
-      navigator.clipboard.writeText(props.text).catch((err) => console.error("Copy failed", err))
+      navigator.clipboard.writeText(props.text)
+        .catch((err) => console.error("Copy failed", err))
 
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
@@ -19,17 +20,17 @@ export function CopyButton(props: CopyButtonProps) {
   }
 
   return (
-    <div class={styles.copyButtonWrapper}>
+    <div data-component="copy-button" class={styles.root}>
       <button
         type="button"
-        class={styles.copyButton}
         onClick={handleCopyClick}
         data-copied={copied() ? true : undefined}
-        title="Copy content"
       >
-        {copied() ? <IconCheckCircle width={16} height={16} /> : <IconClipboard width={16} height={16} />}
+        {copied()
+          ? <IconCheckCircle width={16} height={16} />
+          : <IconClipboard width={16} height={16} />
+        }
       </button>
-      {copied() && <span class={styles.copyTooltip}>Copied!</span>}
     </div>
   )
 }

packages/web/src/components/share/part.module.css

@@ -142,6 +142,12 @@
       border: 1px solid var(--sl-color-blue-high);
       padding: 0.5rem calc(0.5rem + 3px);
       border-radius: 0.25rem;
+      position: relative;
+
+      [data-component="copy-button"] {
+        top: 0.5rem;
+        right: calc(0.5rem - 1px);
+      }
     }
   }
 
@@ -264,6 +270,12 @@
         border: 1px solid var(--sl-color-divider);
         padding: 0.5rem calc(0.5rem + 3px);
         border-radius: 0.25rem;
+        position: relative;
+
+        [data-component="copy-button"] {
+          top: 0.5rem;
+          right: calc(0.5rem - 1px);
+        }
       }
     }
   }