sticky-comment-header - Remove rounded corners when stuck - #9975
sticky-comment-header - Remove rounded corners when stuck#9975wunianze666-netizen wants to merge 1 commit into
sticky-comment-header - Remove rounded corners when stuck#9975Conversation
|
This looks like an AI-generated PR, so we're preemptively closing it. If you're human and tested it, include a screenshot/video/gif of the working PR and we can reopen the PR. Don't open more PRs until this one is resolved. |
|
I tested this in the built extension on Chrome for Testing 152 using the requested sandbox URL. The PR body includes before/after screenshots showing the header before scrolling and while stuck, and the full local test suite passes. Could you please reopen it for review? |
|
Thank you. The fix is much easier though: set border-radius to zero when stuck |
|
I tried setting border-radius directly first, but a scroll-state container query can only style descendants, not its own query container. The rounded corners belong to IssueBodyHeaderContainer itself, and a minimal Chrome 152 reproduction keeps the computed radius unchanged when border-radius: 0 is placed inside that element's own @container block. That is why this patch uses the pseudo-element to fill only the corners while stuck. Setting the header radius to zero unconditionally would be simpler, but would also remove the rounded corners before scrolling. I can switch to that behavior if it is preferable. |
sticky-comment-header - Remove rounded corners when stuck
Closes #9973
The sticky comment header keeps its rounded top corners after reaching the viewport edge, which leaves visible gaps above the header. This adds a scroll-state container query and paints an inherited background behind those corners only while the header is actually stuck.
A pseudo-element is used because a container query cannot style its own query container. Browsers without scroll-state query support keep the existing appearance as a progressive fallback.
Test URLs
sticky-comment-header- Testing issue sandbox#117Screenshot
Before scrolling:
After the header becomes sticky:
This change was AI-assisted and then reviewed in the built extension on Chrome for Testing 152. The full project test suite passes with 564 tests passed and 28 skipped.