From 7c1717fee5493dfe8ad5c62bcb8fd4a0b0037232 Mon Sep 17 00:00:00 2001 From: danny neira <16809145+dannyneira@users.noreply.github.com> Date: Fri, 8 May 2026 13:03:54 -0600 Subject: [PATCH 1/2] 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 --- src/styles/warp-components.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/styles/warp-components.css b/src/styles/warp-components.css index 06e1a5ea..ac25ef5d 100644 --- a/src/styles/warp-components.css +++ b/src/styles/warp-components.css @@ -209,6 +209,17 @@ pre.astro-code, border-color: rgba(0, 0, 0, 0.12); } +/* Always show copy button at reduced opacity so it's discoverable without + hovering. EC hides it with opacity:0 in @media(hover:hover) by default; + override to 0.4 so the button is subtly visible at all times, progressing + to 0.75 on frame hover and 1.0 when hovering the button itself (both via + higher-specificity EC rules that win over this one). */ +@media (hover: hover) { + .expressive-code .copy button { + opacity: 0.4; + } +} + /* Inline code — same optical size as fenced blocks (0.9375em / 15px) so prose, callouts, and code blocks share one type scale. @@ -247,6 +258,17 @@ pre.astro-code, display: none; } +/* For untitled frames of any type, directly override the copy button's + inset-block-start. EC's .is-terminal frames get a large --button-spacing + to clear the titlebar we hide; bypassing that variable with an explicit + 0.5rem offset places the button cleanly inside the top-right corner of + every untitled block. Titled frames are unaffected — their button + continues to sit below the visible title bar via EC's default spacing. */ +.expressive-code .frame:not(.has-title) .copy { + inset-block-start: 0.5rem; + inset-inline-end: 0.5rem; +} + /* Code blocks inside asides: keep the standalone padding rhythm so a code block looks identical inside or outside a callout. Pull a small block margin so the card sits flush within the callout's tinted area. */ From f64025f3d31296fdeec085a2d151107c74e10206 Mon Sep 17 00:00:00 2001 From: danny neira <16809145+dannyneira@users.noreply.github.com> Date: Fri, 8 May 2026 14:58:59 -0600 Subject: [PATCH 2/2] fix: bump copy button opacity to 0.6 in light mode, fix comment spacing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add :root[data-theme='light'] opacity: 0.6 override inside @media (hover: hover) so the button is visible against the faint light-mode button surface - Fix comment typo: @media(hover:hover) → @media (hover: hover) Co-Authored-By: Oz --- src/styles/warp-components.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/styles/warp-components.css b/src/styles/warp-components.css index ac25ef5d..60826a45 100644 --- a/src/styles/warp-components.css +++ b/src/styles/warp-components.css @@ -210,14 +210,20 @@ pre.astro-code, } /* Always show copy button at reduced opacity so it's discoverable without - hovering. EC hides it with opacity:0 in @media(hover:hover) by default; + hovering. EC hides it with opacity:0 in @media (hover: hover) by default; override to 0.4 so the button is subtly visible at all times, progressing to 0.75 on frame hover and 1.0 when hovering the button itself (both via - higher-specificity EC rules that win over this one). */ + higher-specificity EC rules that win over this one). Light mode bumps to + 0.6 because the button surface is already very faint (rgba(0,0,0,0.04) + background) and 0.4 would render it nearly invisible. */ @media (hover: hover) { .expressive-code .copy button { opacity: 0.4; } + + :root[data-theme='light'] .expressive-code .copy button { + opacity: 0.6; + } } /* Inline code — same optical size as fenced blocks (0.9375em / 15px) so