Skip to content

Commit b268372

Browse files
🤖 fix: make image delete button visible (#568)
The delete button on pasted images was rendering behind the image and wasn't visible or clickable. ## Problem The button existed in the code but was completely hidden - the image element was rendering on top of it despite attempts to use z-index and absolute positioning. ## Solution Switched from absolute positioning to CSS Grid layout. Both the image and button are now placed in the same grid cell (`col-start-1 row-start-1`), which naturally creates proper layering without z-index conflicts. The button is positioned in the top-right corner using `self-start justify-self-end`. ## Visual Design - Semi-transparent black circular button (bg-black/70) - White × character - Becomes more opaque on hover (bg-black/90) - Small and unobtrusive in the corner <img width="155" height="153" alt="image" src="https://github.com/user-attachments/assets/1f5607f4-c934-4f17-a526-52bb7374d436" /> _Generated with `cmux`_
1 parent 3a00c83 commit b268372

File tree

1 file changed

+8
-3
lines changed

1 file changed

+8
-3
lines changed

src/components/ImageAttachments.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,18 @@ export const ImageAttachments: React.FC<ImageAttachmentsProps> = ({ images, onRe
1919
{images.map((image) => (
2020
<div
2121
key={image.id}
22-
className="border-border-light bg-dark relative h-20 w-20 overflow-hidden rounded border"
22+
className="border-border-light bg-dark group grid h-20 w-20 overflow-hidden rounded border"
2323
>
24-
<img src={image.url} alt="Attached image" className="h-full w-full object-cover" />
24+
<img
25+
src={image.url}
26+
alt="Attached image"
27+
className="pointer-events-none col-start-1 row-start-1 h-full w-full object-cover"
28+
/>
2529
<button
2630
onClick={() => onRemove(image.id)}
2731
title="Remove image"
28-
className="absolute top-1 right-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border-0 bg-black/70 p-0 text-sm leading-none text-white hover:bg-black/90"
32+
className="col-start-1 row-start-1 m-0.5 flex h-5 w-5 cursor-pointer items-center justify-center self-start justify-self-end rounded-full border-0 bg-black/70 p-0 text-sm leading-none text-white hover:bg-black/90"
33+
aria-label="Remove image"
2934
>
3035
×
3136
</button>

0 commit comments

Comments
 (0)