fix(Notch): bleed headOnly tab connecting edge 1px to kill the fractional-DPI seam#317
Closed
I-am-nothing wants to merge 1 commit into
Closed
fix(Notch): bleed headOnly tab connecting edge 1px to kill the fractional-DPI seam#317I-am-nothing wants to merge 1 commit into
I-am-nothing wants to merge 1 commit into
Conversation
…actional-DPI seam A headOnly Notch tab sits flush on the surface below it (e.g. the agent sidebar's active tab over its message body). Both are filled with the same --color-on-background but are SEPARATE fills meeting edge-to-edge at the tab's flat connecting edge. When that shared boundary lands on a fractional device-pixel row — sub-pixel transforms, or non-integer DPR such as Windows display scaling — each fill paints <100% coverage on that physical row and the darker layer beneath shows through as a crisp 1px line. Invisible on integer-DPR / retina, where the edges snap and abut cleanly. Extend the tab fill 1px past the flat connecting edge (build x=0 -> -1) so the two surfaces OVERLAP instead of abutting, and render the headOnly svg with overflow:visible so the bleed is not clipped. Only the build-x=0 edge moves — the radiused tab corners (the tab top) are byte-for-byte unchanged, and bleed=0 reproduces the original path. Fixes the seam for every consumer of the agent sidebar / notch tab. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
Storybook Preview: https://mirrorstack-ai.github.io/web-ui-kit/pr/317/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
A full-width 1px line at the junction where a
headOnlyNotch tab meets the surface below it — e.g. the agent sidebar's active tab over its message body. Visible on Windows / fractional display scaling, invisible on retina. Reported on web-landing; affects every platform app that uses the agent sidebar / a bottom-notch tab over a panel.Root cause
The tab (a
NotchSVG fill) and the body are two separate fills of the same--color-on-background, abutting edge-to-edge at the tab's flat connecting edge (buildx=0). When that shared boundary lands on a fractional device-pixel row (sub-pixel transform / non-integer DPR), both fills paint<100%coverage on that physical row and the darker layer beneath shows through as a 1px seam.Notably it is not a stroke (the active tab is
stroke:"none",strokeWidth:0) and not the viewBox pad — it's a pure fill-abutment antialiasing seam.Fix
Extend the tab fill 1px past its flat connecting edge (
build x=0 → -1) so the two surfaces overlap instead of abutting, and setoverflow="visible"on the headOnly svg so the bleed isn't clipped.build-x=0edge moves; the radiused tab corners (build x=w, the tab top) are byte-for-byte unchanged.bleed = 0reproduces the original path exactly (default; non-headOnly is unaffected).Validation
pnpm typecheckclean; Notch tests pass (9) including a new regression test assertingoverflow="visible"and theM -1,connecting edge.Patch bump 0.5.13 → 0.5.14 (
releaselabel per the kit's versioning rule). Consumers (web-landing + platform apps) pick it up on a dep bump.🤖 Generated with Claude Code