Skip to content

Commit facb617

Browse files
dannyneiraoz-agent
andcommitted
fix: position copy button top-right and always visible in code blocks
- 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>
1 parent d91c1b7 commit facb617

1 file changed

Lines changed: 22 additions & 0 deletions

File tree

src/styles/warp-components.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,17 @@ pre.astro-code,
209209
border-color: rgba(0, 0, 0, 0.12);
210210
}
211211

212+
/* Always show copy button at reduced opacity so it's discoverable without
213+
hovering. EC hides it with opacity:0 in @media(hover:hover) by default;
214+
override to 0.4 so the button is subtly visible at all times, progressing
215+
to 0.75 on frame hover and 1.0 when hovering the button itself (both via
216+
higher-specificity EC rules that win over this one). */
217+
@media (hover: hover) {
218+
.expressive-code .copy button {
219+
opacity: 0.4;
220+
}
221+
}
222+
212223
/* Inline code — same optical size as fenced blocks (0.9375em / 15px) so
213224
prose, callouts, and code blocks share one type scale.
214225
@@ -247,6 +258,17 @@ pre.astro-code,
247258
display: none;
248259
}
249260

261+
/* For untitled frames of any type, directly override the copy button's
262+
inset-block-start. EC's .is-terminal frames get a large --button-spacing
263+
to clear the titlebar we hide; bypassing that variable with an explicit
264+
0.5rem offset places the button cleanly inside the top-right corner of
265+
every untitled block. Titled frames are unaffected — their button
266+
continues to sit below the visible title bar via EC's default spacing. */
267+
.expressive-code .frame:not(.has-title) .copy {
268+
inset-block-start: 0.5rem;
269+
inset-inline-end: 0.5rem;
270+
}
271+
250272
/* Code blocks inside asides: keep the standalone padding rhythm so a code
251273
block looks identical inside or outside a callout. Pull a small block
252274
margin so the card sits flush within the callout's tinted area. */

0 commit comments

Comments
 (0)