code block copy button is always visible
hover-revealed means most people never find it, and touch has no hover at all. 70% white on the dark block, brightening on hover; the pre reserves right padding so a long first line scrolls up to the button instead of under it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -33,7 +33,7 @@ export const CodeBlock = ({ children, ...props }: ComponentPropsWithoutRef<'pre'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="chat-code group/code relative">
|
||||
<div className="chat-code relative">
|
||||
<pre ref={ref} {...props}>
|
||||
{children}
|
||||
</pre>
|
||||
@@ -42,9 +42,10 @@ export const CodeBlock = ({ children, ...props }: ComponentPropsWithoutRef<'pre'
|
||||
onClick={handleCopy}
|
||||
title="Copy code"
|
||||
aria-label="Copy code"
|
||||
// Hover-revealed on a pointer device, always visible on touch — there is no hover to reveal it
|
||||
// with. Colours are hardcoded light-on-dark because the block behind it is #0d1117 in both themes.
|
||||
className="absolute top-1.5 right-1.5 cursor-pointer rounded border border-white/15 bg-white/10 p-1 text-white/80 opacity-70 transition-opacity hover:!opacity-100 focus-visible:opacity-100 md:opacity-0 md:group-hover/code:opacity-70"
|
||||
// Always visible, not hover-revealed: a control you have to discover by waving the pointer at it
|
||||
// is a control most people never find, and on touch there is no hover to find it with at all.
|
||||
// Colours are hardcoded light-on-dark because the block behind it is #0d1117 in both themes.
|
||||
className="absolute top-1.5 right-1.5 cursor-pointer rounded border border-white/15 bg-white/10 p-1 text-white/70 transition-colors hover:border-white/30 hover:bg-white/20 hover:text-white"
|
||||
>
|
||||
{copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user