Add magnifying glass icon to remote-select inputs#1525
Merged
Conversation
Differentiates type-to-search fields from regular dropdowns, which have a chevron caret on the right. The icon is added globally in the remote-select Stimulus controller so all uses get the same visual cue. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
c3e2822 to
894b2b7
Compare
The icon was anchored at left:0 of the .ts-wrapper, which placed it on top of the rounded border and clipped its left edge. Moving it inward to 0.25rem and bumping the input's left padding to 1.5rem so it sits inside the visible content area with clearance from the typed text. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The previous attempt positioned the icon absolutely against .ts-wrapper, but the wrapper's bounds did not match the visible bordered box in practice (icon rendered clipped at the left border). Wrap the Tom Select element in a .remote-select-container div that is created and styled by this controller. The icon now positions against a container whose dimensions we fully control. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
5d63d92 to
234b231
Compare
Collaborator
Author
|
@jmilljr24 hope this was a good compromise! we're not doing the dropdown thing, but, doing a magnifying glass could help a lot w clarity. added a separate pr to update the prompt text for all of these. |
jmilljr24
approved these changes
May 25, 2026
Collaborator
jmilljr24
left a comment
There was a problem hiding this comment.
In my opinion its great. Hopefully this is enough to nudge them in the right direction.
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
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.
What is the goal of this PR and why is this important?
How did you approach the change?
remote-selectfield, injected by the existing Stimulus controller so all uses get it consistently.remote-select-containerdiv the controller creates, so the icon positions against a container with predictable dimensions (positioning against.ts-wrapperdirectly was rendering clipped)UI Testing Checklist
Anything else to add?
remote-select