Skip to content

fix(CodeBlock): Show Action Buttons on Hover #989

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dustinhealy wants to merge 6 commits into
base: chore/v0.2.0
Choose a base branch
from
Open

fix(CodeBlock): Show Action Buttons on Hover #989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b0611ac
fix(CodeBlock): prevent action buttons from overlapping code content
dustinhealy Apr 13, 2026
33537f1
fix(CodeBlock): show action buttons on hover with subtle background
dustinhealy Apr 13, 2026
6d529df
fix: move ButtonContainer before CodeBlockContainer to fix TS2448
dustinhealy Apr 13, 2026
9b0a0a8
style: format CodeBlock.tsx
dustinhealy Apr 13, 2026
5c35600
fix: address code review — reduced-motion, theme tokens, color-mix, c…
dustinhealy Apr 13, 2026
e615c4f
fix: remove calc offsets, use original top/right positioning
dustinhealy Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-codeblock-button-overlap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@clickhouse/click-ui": patch
---

CodeBlock action buttons (copy, wrap) are now hidden by default and revealed on hover or focus-within with a fade transition. Buttons display a semi-opaque background pill matching the code block theme to prevent overlap with code content.
37 changes: 26 additions & 11 deletions src/components/CodeBlock/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,37 @@ interface CustomRendererProps {
useInlineStyles: boolean;
}

const ButtonContainer = styled.div<{ $theme?: CodeThemeType }>`
position: absolute;
display: flex;
opacity: 0;
transition: opacity 0.15s ease;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
${({ theme, $theme }) => {
const themeName = ($theme ?? theme.name) as CodeThemeType;
const bg = theme.click.codeblock[`${themeName}Mode`].color.background.default;
return `
gap: 0.625rem;
border-radius: ${theme.click.codeblock.radii.all};
padding: ${theme.sizes[1]};
top: ${theme.click.codeblock.space.y};
right: ${theme.click.codeblock.space.x};
background: color-mix(in srgb, ${bg} 90%, transparent);
`;
}}
`;

const CodeBlockContainer = styled.div<{ $theme?: CodeThemeType }>`
width: 100%;
width: -webkit-fill-available;
width: fill-available;
width: stretch;
position: relative;
&:hover ${ButtonContainer}, &:focus-within ${ButtonContainer} {
opacity: 1;
}
${({ theme, $theme }) => {
const themeName = theme.name as CodeThemeType;

Expand Down Expand Up @@ -84,16 +109,6 @@ const CodeContent = styled.code`
color: inherit;
`;

const ButtonContainer = styled.div`
position: absolute;
display: flex;
${({ theme }) => `
gap: 0.625rem;
top: ${theme.click.codeblock.space.y};
right: ${theme.click.codeblock.space.x};
`}
`;

export const CodeBlock = ({
children,
language,
Expand Down Expand Up @@ -140,7 +155,7 @@ export const CodeBlock = ({
$theme={theme}
{...props}
>
<ButtonContainer>
<ButtonContainer $theme={theme}>
{showWrapButton && (
<CodeButton
as={IconButton}
Expand Down
Loading