fix(pagefilter) increase hitBox, add infoTop and search clear#108422
fix(pagefilter) increase hitBox, add infoTop and search clear#108422
Conversation
…ange Prevents stale anchors from triggering unexpected range selection across menu sessions, and ensures shift+click ranges only span visible options when the list is filtered by search.
github-actions
bot
added
the
Scope: Frontend
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| <InfoTip | ||
| size="xs" | ||
| variant="muted" | ||
| title="Shift + click to select a range of environments or cmd + click to select multiple environments at once." |
There was a problem hiding this comment.
InfoTip titles missing internationalization wrapper
Medium Severity
The InfoTip title strings in both environmentPageFilter.tsx and projectPageFilter.tsx are plain string literals instead of being wrapped in t() for internationalization. Every other user-facing string in these same files (e.g., t('Filter Environments'), t('No projects found')) uses t(), and t is already imported. These tooltip texts will not be translated for non-English users.
Additional Locations (1)
| } & CheckboxProps | ||
| ) { | ||
| return <CheckboxWithIncreasedHitArea {...props} />; | ||
| }, |
There was a problem hiding this comment.
Type intersection negates Omit, unused prop declared
Low Severity
The HybridFilterComponents.Checkbox type DistributedOmit<CheckboxProps, 'size'> & { withIncreasedHitArea?: boolean } & CheckboxProps is contradictory — the final & CheckboxProps re-adds size, completely negating the DistributedOmit. Additionally, withIncreasedHitArea is declared in the type but never read in the implementation; the styled component is always applied regardless. Both are dead/ineffective code.
| position: absolute; | ||
| inset: -${p => p.theme.space.md}; | ||
| } | ||
| `; |
There was a problem hiding this comment.
Hit area pseudo-element won't work on input element
Medium Severity
CheckboxWithIncreasedHitArea uses input[type='checkbox']::after to expand the clickable area, but ::after pseudo-elements are not reliably generated on <input> elements because they are void/replaced elements. This works in Chrome (non-standard) but not in Firefox. Additionally, NativeHiddenCheckbox doesn't set appearance: none, further reducing the chances of the pseudo-element being rendered. The PR's core goal of increasing the checkbox hitbox will silently fail for non-Chromium users.
There was a problem hiding this comment.
Progressive enhancement? We could make the checkbox larger, but it starts to get really busy with the project icon there as well...
|
@cursoragent apply suggestions from PR review |
|
I've successfully applied all the suggestions from the PR review. Here's what was fixed: Fixed Issues:
All changes have been committed and pushed to the |
- Wrap InfoTip titles in t() for internationalization - Fix checkbox hitbox implementation for cross-browser compatibility - Clean up type definitions and remove unused withIncreasedHitArea prop - Remove unused Checkbox import from projectPageFilter Co-authored-by: Jonas <JonasBa@users.noreply.github.com>
2 participants
Small UX improvements to the projectFilters component:
Increased hitbox of Checkbox - this component is very rough in the sense that you need surgical precision to click on the checkbox directly or risk applying changes you did not want to make. A clear example is clicking one or two rows, then misclicking the 3rd and losing the selection as click applies the single selection immediately
Fixed a bug with shift click where after selecting a project and performing a search, the shift click would highlight hidden elements that were invisible to the user (stale reference to last selected item)