fix(web): increase contrast of question option descriptions#3867
fix(web): increase contrast of question option descriptions#3867xxashxx-svg wants to merge 1 commit into
Conversation
Option descriptions in the pending user input panel used text-muted-foreground/50 — the already-muted token at half opacity — which over the composer's translucent bg-muted/20 surface is very hard to read in dark mode, especially with a blurred background behind the window. Use full-opacity text-muted-foreground, matching how descriptions are styled elsewhere (ui/dialog.tsx DialogDescription, menu group labels). The text-xs size already keeps it visually secondary to the label. Fixes pingdotgg#3701 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
ApprovabilityVerdict: Approved Single-line CSS class change that increases text opacity for better contrast. Purely visual styling adjustment with no runtime behavior impact. You can customize Macroscope's approvability policy. Learn more. |
Fixes #3701
What
Option descriptions in the question tool (pending user input panel) were rendered with
text-muted-foreground/50— the already-muted foreground token at half opacity. Over the composer's translucentbg-muted/20surface, and especially in dark mode on macOS where a blurred desktop shows through, that lands well below comfortable reading contrast (see the issue's screenshots).Change
One line in
ComposerPendingUserInputPanel.tsx:text-muted-foreground/50→text-muted-foreground.Full-opacity
text-muted-foregroundis the design system's standard treatment for secondary/description text — it's whatDialogDescription(ui/dialog.tsx) and menu group labels (ui/menu.tsx) use — so this brings the question panel in line with the rest of the app rather than inventing a new shade. Thetext-xssize (vs the label'stext-sm font-medium) already keeps the description visually subordinate to the option label, so no hierarchy is lost.This matches the issue reporter's own testing, where removing the heavy dimming was "a vast improvement."
Scoped deliberately to the line users complained about — the panel's other decorative uses of opacity-modified tokens (header, shortcut hints) are legible and untouched.
🤖 Generated with Claude Code
Note
Low Risk
Single Tailwind class change on descriptive copy only; no logic, auth, or data impact.
Overview
Improves readability of secondary text under each choice in the composer’s pending user-input (question) panel.
Option descriptions no longer use
text-muted-foreground/50; they now use fulltext-muted-foreground, matching patterns likeDialogDescription. Labels staytext-sm font-medium; descriptions staytext-xs, so hierarchy is unchanged—only contrast on the translucent composer surface (especially dark mode) is improved.Reviewed by Cursor Bugbot for commit 1378901. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Increase contrast of question option descriptions in
ComposerPendingUserInputCardChanges the description text class from
text-muted-foreground/50totext-muted-foregroundin ComposerPendingUserInputPanel.tsx, making option descriptions more readable within choice buttons.Macroscope summarized 1378901.