Quieten the interface, and fix three contrast failures it was hiding - #3
Merged
Merged
Conversation
CSS only -- no HTML, no JS, no new dependency. Three AA failures existed and were invisible because the token that caused them passes in isolation. `--muted` measured 4.51:1 on the page background, AA by a hundredth, so every tinted surface underneath it fell through: the lap pill at 4.34:1, the detail line of a danger finding at 4.10:1, the disclaimer at 4.44:1. #5b6b82 clears 4.5:1 against all of them rather than depending on the backdrop never being tinted. `--bg` goes one step deeper for a related reason: a white card sat at 1.06:1 against the page, so only its border made it a card. The rest is noise, not colour. There were two stacked *dashed* boxes -- the disclaimer directly above the dropzone -- which read as two placeholders; callouts came in four different treatments; nine findings were nine outlined cards with eight gaps of nothing between them; stat tiles carried a border and a shadow; five radii did the work of two. Now every callout is a surface card with a coloured left bar, the findings are one container with dividers and the tone on an inset bar, and dashed is reserved for the dropzone, which is the one thing on the page you are meant to drop something on. Two real bugs went with it. At 390px the stat grid fell to 2 + 1 and the orphan tile let "1000 m 1100 m" wrap, leaving a lone "m" on its own line; the grid is now three across at every width and the previous value sits on its own line. And `.dropzone.dragging .dropzone-title code` never matched anything: the drag class goes on <body>, which the rule above it says in so many words. Also: the ⚙️ Assumptions panel had `list-style: none` and nothing in place of the marker, so nothing indicated it opened -- it now has a caret that turns. Verified with a contrast script over every affected pair in both schemes (0 failures, light and dark), and in Chromium at 1280px and 390px in both schemes. The functional browser suite still passes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Warning Review limit reachedNext included review available in 27 minutes. View limit detailsLimit details: You’ve used the included review currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Review configuration: ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
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.
CSS only — no HTML, no JS, no new dependency.
Three AA failures, already live
They were invisible because the token causing them passes in isolation:
--mutedis 4.51:1 on the page background — AA by a hundredth — so every tinted surface under it fell through..finding-lap--surface-2.experiment p(the disclaimer).finding-detailin a danger finding#5b6b82clears 4.5:1 against all of them (4.82 page, 5.43 card, 4.95 pill, 4.68 danger tint) instead of depending on the backdrop never being tinted.--bggoes one step deeper for a related reason: a white card sat at 1.06:1 against the page, so only its border made it a card.Verified with a script over every affected pair in both schemes — 0 failures light, 0 dark.
Two real bugs
minmax(150px, 1fr)gave 2 + 1, and the orphaned tile had room for1000 m1100 mto wrap, leaving a lone "m" on its own line. Now three across at every width, with the previous value on its own line. Measured: three equal tiles (111px) at 390px, no wrap..dropzone.dragging .dropzone-title codenever matched anything. The drag class goes on<body>— as the comment directly above it says. Deleted.The noise
What read as amateurish was box-on-box, not colour:
Now: every callout is a surface card with a coloured left bar; findings are one container with dividers and tone on an inset bar; dashed is reserved for the dropzone, which is the one thing you're meant to drop something on. The findings list also gets a fixed icon chip, because the emoji are different widths in every font and shifted the text column row to row.
Plus: the ⚙️ Assumptions panel had
list-style: noneand nothing replacing the marker, so nothing said it opened. It has a caret that turns now.Kept deliberately
The disclaimer is still the first and boldest block on the page — a white notice with an accent bar reads "read this", where dashed read "placeholder".
--accentis untouched (its comment explains why it is what it is). No web fonts, no gradients, no theme toggle.Verification
task checkgreen: 79 tests, lint, privacy scan, build🤖 Generated with Claude Code