onlook
onlook copied to clipboard
[feat] Improve X button sizing and positioning on draft context and image pills
The current X buttons on draft pills are too large and poorly positioned. I'm proposing to make them smaller and better aligned, which will make the text more visible and make it visually consistent.
Changes
Update the X button className in both files:
draft-context-pill.tsx:
// Change this line:
className="absolute -top-1.5 -right-1.5 w-6 h-6 p-1 rounded-full bg-primary flex items-center justify-center opacity-0
group-hover:opacity-100 transition-opacity duration-200 cursor-pointer"
// To this:
className="absolute -top-1 -right-1 w-4 h-4 p-0.5 rounded-full bg-primary flex items-center justify-center opacity-0 group-hover:opacity-100
transition-opacity duration-200 cursor-pointer"
draft-image-pill.tsx: Same change as above.
Result
- Smaller buttons (w-6 h-6 → w-4 h-4)
- Better positioning (-top-1.5 -right-1.5 → -top-1 -right-1)
- Less padding (p-1 → p-0.5)
I have before/after screenshots attached here.
P.S. I've forked the repo and made the change on my end. If it is agreed upon that this improves visual consistency, then I'll make a pull request.