ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: copy button hidden by overflow clip on code snippets

Browse source
This commit is contained in:
Roland Tannous 2026-04-10 05:06:20 +00:00
commit bb63463ac8
1 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

24
studio/frontend/src/features/chat/chat-page.tsx
View file

@ -112,23 +112,25 @@ function HighlightedSnippet({
// changes (e.g. the API key). Forcing a remount keyed on the source string
// guarantees the displayed snippet always matches the latest props.
return (
<div className="relative mt-2 overflow-x-auto rounded bg-muted p-2 text-[11px] leading-relaxed [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:!overflow-x-auto [&_code]:!whitespace-pre-wrap [&_code]:!break-all [&_[data-streamdown=code-block]]:!my-0 [&_[data-streamdown=code-block]]:!border-0 [&_[data-streamdown=code-block]]:!p-0">
<div className="relative mt-2">
<button
type="button"
onClick={handleCopy}
className="absolute top-1.5 right-1.5 rounded px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-background hover:text-foreground transition-colors"
className="absolute top-1.5 right-1.5 z-10 rounded bg-muted-foreground/10 px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-muted-foreground/20 hover:text-foreground transition-colors"
>
{copied ? "Copied!" : "Copy"}
</button>
<Streamdown
key={markdown}
mode="static"
plugins={{ code: codePlugin }}
controls={{ code: false }}
shikiTheme={SHIKI_THEME}
>
{markdown}
</Streamdown>
<div className="overflow-x-auto rounded bg-muted p-2 text-[11px] leading-relaxed [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:!overflow-x-auto [&_code]:!whitespace-pre-wrap [&_code]:!break-all [&_[data-streamdown=code-block]]:!my-0 [&_[data-streamdown=code-block]]:!border-0 [&_[data-streamdown=code-block]]:!p-0">
<Streamdown
key={markdown}
mode="static"
plugins={{ code: codePlugin }}
controls={{ code: false }}
shikiTheme={SHIKI_THEME}
>
{markdown}
</Streamdown>
</div>
</div>
);
}