Skip to content

fix(web): increase contrast of question option descriptions#3867

Open
xxashxx-svg wants to merge 1 commit into
pingdotgg:mainfrom
xxashxx-svg:fix/question-option-description-contrast
Open

fix(web): increase contrast of question option descriptions#3867
xxashxx-svg wants to merge 1 commit into
pingdotgg:mainfrom
xxashxx-svg:fix/question-option-description-contrast

Conversation

@xxashxx-svg

@xxashxx-svg xxashxx-svg commented Jul 10, 2026

Copy link
Copy Markdown

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 translucent bg-muted/20 surface, 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/50text-muted-foreground.

Full-opacity text-muted-foreground is the design system's standard treatment for secondary/description text — it's what DialogDescription (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. The text-xs size (vs the label's text-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 full text-muted-foreground, matching patterns like DialogDescription. Labels stay text-sm font-medium; descriptions stay text-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 ComposerPendingUserInputCard

Changes the description text class from text-muted-foreground/50 to text-muted-foreground in ComposerPendingUserInputPanel.tsx, making option descriptions more readable within choice buttons.

Macroscope summarized 1378901.

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>
@coderabbitai

coderabbitai Bot commented Jul 10, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d7ff659c-b6fd-4f8f-96fe-e00a119fd2af

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:XS 0-9 changed lines (additions + deletions). labels Jul 10, 2026
@macroscopeapp

macroscopeapp Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XS 0-9 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Increase contrast of question tool descriptions

1 participant