🤖 fix: make image delete button visible #568
Merged
Conversation
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
Make the delete button more visually prominent with: - Visible white border around the circular button - Red background on hover for clearer delete affordance - Scale up animation on hover for better interactivity - Stronger contrast with semi-transparent black background - Bold X character for improved readability - Added aria-label for accessibility _Generated with `cmux`_
Previous button was too subtle and hard to see. Now it: - Always visible (red background, not just on hover) - Larger (6x6 instead of 5x5) - Solid white border (2px) for strong contrast - Drop shadow for depth - Red background that darkens on hover _Generated with `cmux`_
Button was rendering behind the image. Added z-10 to ensure it appears on top and is clickable. _Generated with `cmux`_
Use CSS Grid to properly layer the delete button over images. The button now appears in the top-right corner with semi-transparent black background and becomes more opaque on hover. Previous attempts with absolute positioning and z-index failed because the image was rendering on top of the button. Grid layout with both elements in the same cell (col-start-1 row-start-1) ensures proper layering without z-index issues. _Generated with `cmux`_
ethanndickson
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
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 usingself-start justify-self-end.Visual Design
Generated with
cmux