fix: render failed status-dot as a dotted ring (was a 4-dash flower)#283
Merged
Conversation
The failed StatusDot used a CSS dashed border on a 7px circle, which fits only ~4 dashes — they read as flower petals, not the intended fine dashed ring, and the 4px red center overflowed the thin ring. Switch to a dotted border on a slightly larger 9px footprint with a 1.2px stroke and a 3px red center (the one shape that breaks the uniform 7px DOT_SIZE). Update the status-dot doc + matrix SVG to match.
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
2 participants
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.
Summary
The failed StatusDot rendered as a pink "flower" in the sidebar instead of the intended dashed ring from the design doc. Root cause: a CSS
dashedborder on a 7px circle fits only ~4 dashes (the browser controls the count), so they read as flower petals — and the 4px red center overflowed the thin ring. CSS gives no control over dash count, so this switches to adottedborder on a slightly larger 9px footprint, which renders as a clean bead ring at the dense sidebar size.Changes
status-dot.tsx— failed branch:1.8px dashed@ 7px →1.2px dotted@ 9px; red center4px → 3px(now fits the ring's ~6.6px inner hole). The failed dot is the one deliberate exception to the uniform 7pxDOT_SIZE; comments updated to document why.status-dot.test.tsx/window-row.test.tsx— 4 assertions + names/comments:"dashed"→"dotted".docs/site/status-dot.md— spec language "dashed ring" → "dotted ring"; the CSS detail row now documentsdotted 1.2px @ 9px.docs/img/status-dot-matrix.svg— all 5 failed cells + legend: dashedstroke-dasharray="3 2"→ round-capped dotted (stroke-linecap="round" stroke-dasharray="0.1 3").Verification
just check(tsc --noEmit) — clean🤖 Generated with Claude Code