fix: position copy button top-right and always visible in code blocks#42
Merged
hongyi-chen merged 2 commits intomainfrom May 8, 2026
Merged
fix: position copy button top-right and always visible in code blocks#42hongyi-chen merged 2 commits intomainfrom
hongyi-chen merged 2 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dannyneira
commented
May 8, 2026
Member
Author
dannyneira
left a comment
dannyneira
left a comment
There was a problem hiding this comment.
This is a CSS-only change that fixes two issues with the copy-to-clipboard button in Expressive Code blocks: it was pushed out of position on short untitled terminal blocks, and was completely hidden until hover. The implementation is technically sound and well-commented, closely following the existing CSS patterns in the file. Found: 0 critical, 0 important, 1 suggestion, 1 nit. Recommendation: Approve with nits.
dannyneira
commented
May 8, 2026
- Override EC's large --button-spacing for untitled terminal frames, which was pushing the copy button into/past the bottom of short blocks - Directly set inset-block-start and inset-inline-end on .copy for all untitled frames (0.5rem each) so the button sits cleanly inside the top-right corner regardless of frame type - Always show the button at 0.4 opacity via @media(hover:hover) override so users can discover it without having to hover first; EC's existing higher-specificity rules step it up to 0.75 on frame hover and 1.0 on button hover Co-Authored-By: Oz <oz-agent@warp.dev>
hongyi-chen
force-pushed
the
fix/copy-button-top-right
branch
from
b83afe7 to
f64025f
Compare
hongyi-chen
approved these changes
May 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the copy-to-clipboard button positioning and visibility in Expressive Code code blocks across the docs site.
Problems fixed:
bash/sh/shellblocks without a title, EC's--button-spacingvariable is sized for the terminal titlebar (which we hide) — this pushed the copy button to the bottom of, or past, short code blocksopacity: 0until hover (via EC's@media (hover: hover)rule), making it non-discoverableChanges
src/styles/warp-components.cssopacity: 0default inside@media (hover: hover)to0.4, so the button is subtly visible at rest. EC's existing higher-specificity rules handle the progression:0.75on frame hover,1.0on button hoverinset-block-startandinset-inline-endon.copyfor all untitled frames (0.5remeach), bypassing the problematic--button-spacingvariable. Titled frames (with a visible tab/filename bar) are unaffectedGIFs
Before:
After:
Co-Authored-By: Oz oz-agent@warp.dev
Oz conversation