onlook icon indicating copy to clipboard operation
onlook copied to clipboard

[feat] Improve X button sizing and positioning on draft context and image pills

Open reddygtvs opened this issue 4 months ago • 0 comments

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.

Image Image Image Image

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.

reddygtvs avatar Aug 16 '25 02:08 reddygtvs