From bc9ae1f1a7bcd7de4405071591e5748d83354672 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 26 Aug 2026 13:01:32 +0000 Subject: [PATCH] fix(countdown): stop the pinned group header clipping its own outline The sticky header was offset by minus the row margin, on the assumption that sticky insets constrain the margin box. They do not, so the header sat 2px above the scroll port and lost its top 2px to the overflow. That is exactly the width of the outline marking a group as active, so the top edge of the ring disappeared as soon as the header pinned. Anchoring at 0 leaves the header flush with no clipping. The follow offset now adds a full row gap rather than a single margin, so the running event lines up under the header on the same rhythm as every other row. The operator keeps its negative inset: its list carries a top padding which the header has to cover, and there is no clipping to avoid since the offset only cancels that padding. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01GjX7D56AW8cL3FXjvtnjtL --- apps/client/src/views/countdown/Countdown.scss | 3 +-- apps/client/src/views/countdown/CountdownSubscriptions.tsx | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/client/src/views/countdown/Countdown.scss b/apps/client/src/views/countdown/Countdown.scss index c411f85db..4eda0ee6e 100644 --- a/apps/client/src/views/countdown/Countdown.scss +++ b/apps/client/src/views/countdown/Countdown.scss @@ -114,8 +114,7 @@ $item-height: 3.5rem; /* scoped to the section, the select view shows the same cards in a flat list */ .sub-section .sub--group { position: sticky; - /* sticky insets constrain the margin box, negate the row margin so the header sits flush */ - top: -2px; + top: 0; z-index: 1; } diff --git a/apps/client/src/views/countdown/CountdownSubscriptions.tsx b/apps/client/src/views/countdown/CountdownSubscriptions.tsx index 5ec64ebf1..c7d466028 100644 --- a/apps/client/src/views/countdown/CountdownSubscriptions.tsx +++ b/apps/client/src/views/countdown/CountdownSubscriptions.tsx @@ -59,8 +59,8 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode // Measured between 91px and 171px, so a constant would leave the running event behind the header. const getStickyOffset = useCallback(() => { const header = stickyHeaderRef.current; - // account for the row margin, so that the rows do not touch - return header ? header.offsetHeight + 2 : 0; + // add a row gap, the 2px margins of the header and of the running event + return header ? header.offsetHeight + 4 : 0; }, []); const scrollToComponent = useFollowComponent({