Uh oh!
There was an error while loading. Please reload this page.
[fix/feat:ui] Move menu checks to the right - #3233
Conversation
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 Purely visual change that moves checkmark indicators from the left to right side of menu items. No runtime behavior changes - only presentation/styling adjustments to UI components. You can customize Macroscope's approvability policy. Learn more. |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 4bbdcf7. Configure here.
| </svg> | ||
| </MenuPrimitive.RadioItemIndicator> | ||
| )} | ||
| <span className={hideIndicator ? "col-start-1" : "col-start-2"}>{children}</span> |
There was a problem hiding this comment.
Label truncation may not apply
Low Severity
MenuRadioItem wraps children in a grid cell without min-w-0, unlike SelectItem. The new traits rows use truncate with a right-side check inside that cell, so long option labels can expand or overflow instead of ellipsizing when the menu width is constrained.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 4bbdcf7. Configure here.
| {option.description} | ||
| </span> | ||
| </div> | ||
| <CheckIcon className={cn("size-4", isSelected ? "opacity-100" : "opacity-0")} /> |
There was a problem hiding this comment.
Muted runtime mode checkmark
Low Severity
The new right-side CheckIcon sits inside SelectItem’s ItemText, which forces SVGs without a text-* class to text-muted-foreground. The old left indicator sat outside ItemText and kept normal foreground contrast, so the selected-state check now matches decorative icons instead of a selection affordance.
Reviewed by Cursor Bugbot for commit 4bbdcf7. Configure here.
shivamhwp
commented
Aug 26, 2026
gpt-5.6-sol on behalf of shivamhwp. Thank you for taking the time to submit this. We are closing this PR because #3234 has already landed the menu-check update on main. It changes the same three files and covers the behavior proposed here, so there is no remaining work for this branch to contribute. We appreciate the contribution. |
What changed
Selected menu items can hide the default left radio indicator and render their checkmark on the right instead.
Why
Humans are used to selected state being on the right side
UI changes
Before:
After:
Checklist
Testing
vp check apps/web/src/components/ui/menu.tsx apps/web/src/components/chat/TraitsPicker.tsx apps/web/src/components/chat/ChatComposer.tsxNote
Move menu check indicators to the right in chat composer and traits picker
CheckIconthat shows conditionally based on the selected value.hideIndicatorprop toMenuRadioItemin menu.tsx, which suppresses the built-in indicator and adjusts layout so content spans the full width.Macroscope summarized 4bbdcf7.
Note
Low Risk
Pure presentation changes to menu/select items; selection behavior and state wiring are unchanged.
Overview
Selection menus in the chat composer and traits picker now show the active choice with a right-aligned
CheckIconinstead of the default left radio/check column.MenuRadioItemgains an optionalhideIndicatorprop that drops the built-in left indicator and uses full-width row padding so callers can render their own trailing check. TraitsPicker applies this to effort/select and On/Off boolean groups. The runtime mode dropdown in ChatComposer uses the same pattern onSelectItem(hideIndicatorplus a check that stays visible only for the current mode).Reviewed by Cursor Bugbot for commit 4bbdcf7. Bugbot is set up for automated code reviews on this repo. Configure here.