Repository navigation
fix: stop quadrant accent colors leaking onto card buttons - #94
Merged
Merged
Conversation
The four quadrant rules used a bare descendant selector (e.g. `.quadrantUrgentImportant button`) to tint the quadrant header's compact Add button. That selector matches every button inside the quadrant, and at specificity 0-1-1 it beat both `.todoTitleButton` (`color: inherit`) and the per-status `.status_*` classes. Turning the card title into a real button for accessibility therefore made titles render in their quadrant's accent color instead of `.todoTitle`'s `#111827`. The same selector had also been flattening all five status badges in a quadrant to one color, erasing their status color coding. Scope the four rules to `.quadrantHeader button`, which is what they were always meant to target. Verified with computed styles: title buttons are `#111827` in every quadrant, `.status_new` is back to `#6b7280`, and the header Add button keeps its accent. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 112ac087-b7da-45a3-a00b-6ca9d06df52b
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
The selectors still affect buttons inside the inline Add TODO dialog and should target only direct-child trigger buttons.
Review effort: Balanced
Findings: 1
Open (1)
What changed in this PR
Scopes quadrant accent styles more narrowly to prevent styling Matrix card controls.
Changes:
- Limits quadrant color rules to buttons within quadrant headers.
- Restores card-title and status-badge colors.
| File | Description |
|---|---|
src/arrange-v4/app/matrix/page.module.css |
Narrows quadrant button selectors. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
`AddTodoItem` renders its overlay inline at its position rather than through a portal, so when the dialog is open its tab, Cancel and Create buttons are still descendants of `.quadrantHeader`. The descendant selector therefore recolored and re-bordered them with the quadrant accent, beating their own component classes on specificity. Use a child combinator so the rules match only the trigger button that sits directly in the header. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 112ac087-b7da-45a3-a00b-6ca9d06df52b
Owner
Author
PR Review Loop Summary
|
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
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.
Card titles in the Matrix view render in their quadrant's accent color instead of the intended dark
#111827.Cause
Each quadrant tints its header's compact + Add button with a bare descendant selector:
That selector matches every button inside the quadrant, and at specificity 0-1-1 it outranks both
.todoTitleButton { color: inherit }(0-1-0) and the per-status.status_*classes.Before #93 the card title was plain text (
<h4 class="todoTitle">{subject}</h4>), so nothing matched it. The accessibility fix in that PR turned the title into a real<button>, which the quadrant rule then captured.The same selector had also been silently flattening all five status badges in a quadrant to a single color, erasing their status color coding.
Fix
Scope the four rules to
.quadrantHeader button— what they were always meant to target.Verification
Computed styles, measured against the real stylesheet:
#dc2626/#2563eb#111827.status_newbadge in Do First#dc2626#6b7280#dc2626#dc2626(unchanged)#991b1b#991b1b(unchanged)175 tests pass,
tsc --noEmitclean,npm run buildclean.