fix(ui): fix transparency bleeding of copied tooltip (#1913)

Author: ShroXd

app/components/CopyToClipboardButton.vue

@@ -37,7 +37,7 @@ function handleClick() {
       class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
       :class="[
         $style.copyButton,
-        copied ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
+        copied ? ['text-accent', $style.copiedBg] : 'text-fg-muted bg-bg border-border',
       ]"
       :aria-label="copied ? buttonAriaLabelCopied : buttonAriaLabelCopy"
       v-bind="buttonAttrs"
@@ -80,6 +80,10 @@ function handleClick() {
     translate 0.15s;
 }
 
+.copiedBg {
+  background-color: color-mix(in srgb, var(--accent) 10%, var(--bg));
+}
+
 @media (hover: none) {
   .copyButton {
     display: none;