From 7529ef5d0da68e66375259600a3646d3f2639c53 Mon Sep 17 00:00:00 2001 From: Wes Date: Mon, 29 Jun 2026 09:56:10 -0600 Subject: [PATCH] fix(desktop): un-clip hover action bar's upward bleed under content-visibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The message-row action bar (react/reply) intentionally bleeds slightly above its row's top edge. After #1338 added `content-visibility: auto` paint containment to timeline rows, that containment clipped the overhang, leaving the reaction bar sheared off at the top. Fix: drop paint containment (`content-visibility: visible`) on a row only while it is hovered/focused — the only time the action bar is visible. Idle and offscreen rows keep `content-visibility: auto`, so the #1338 scroll/perf win is fully preserved. This mirrors the existing `.content-visibility-auto-interactive` pattern in the same file. Adds an e2e regression guard in messaging.spec.ts that asserts a hovered row resolves to `content-visibility: visible` (proven to fail without the rule). Co-authored-by: Brain <21994759fc7a6fa6b965551d35cfd7897d262f2495467f2d78694ddcfa6a5c7e@sprout-oss.stage.blox.sqprod.co> Signed-off-by: Wes --- desktop/src/shared/styles/globals.css | 5 +++++ desktop/tests/e2e/messaging.spec.ts | 9 +++++++++ 2 files changed, 14 insertions(+) diff --git a/desktop/src/shared/styles/globals.css b/desktop/src/shared/styles/globals.css index 660982a6df..2edf002a51 100644 --- a/desktop/src/shared/styles/globals.css +++ b/desktop/src/shared/styles/globals.css @@ -2054,6 +2054,11 @@ contain-intrinsic-size: auto 60px; } + /* paint containment clips the action bar's upward bleed; un-pause the active row */ + .timeline-row-cv:is(:hover, :focus-within) { + content-visibility: visible; + } + .content-visibility-auto-interactive { content-visibility: auto; contain-intrinsic-size: auto 200px; diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts index 5835ef82e0..76ce803512 100644 --- a/desktop/tests/e2e/messaging.spec.ts +++ b/desktop/tests/e2e/messaging.spec.ts @@ -88,6 +88,15 @@ test("long autolink wraps without widening the timeline", async ({ page }) => { return barBox.x + barBox.width - (timelineBox.x + timelineBox.width); }) .toBeLessThanOrEqual(0); + // #1338 guard: hovering must un-pause the row so the upward-bleeding bar renders + await expect + .poll(async () => + actionBar.evaluate((bar) => { + const cvRow = bar.closest(".timeline-row-cv"); + return cvRow ? getComputedStyle(cvRow).contentVisibility : "missing"; + }), + ) + .toBe("visible"); }); test("send multiple messages in sequence", async ({ page }) => {