3591987: Media library remove button is not visible in Canvas component form when selected media is SVG

Narendra Singh Rathorerequested to merge
issue/canvas-3591987:3591987-media-library-remove-button-is-not-visible into 1.x

[Description of changes]

In Canvas component editing (right contextual panel), selecting an SVG in a media library widget can hide the remove button (red “x”) for that selected item. PNG/JPG selections show the remove button correctly.

This happens because SVG items may render as filename/title-only rows (no thumbnail image), while the remove button is positioned with thumbnail-dependent CSS offset. The button ends up outside the visible row area.

Steps to reproduce

1. Enable canvas_test_sdc module.
2. Ensure image media type allows SVG upload.
3. Open Canvas editor and place Card component.
4. In the right panel media field, click Add media and upload/select an SVG.
5. Insert selected media and return to the component form.

Expected result

Remove button is visible for the selected SVG media item, same as PNG/JPG.

Actual result

Only filename/title is visible for the SVG row; remove button is not visible.

Additional context / likely cause
• In MediaLibraryWidgetContainer.module.css, remove button vertical position is hardcoded based on thumbnail height.
• SVG selected rows may not render a thumbnail in this context, so row height collapses and button is positioned out of view.
• PNG/JPG rows include thumbnails and therefore don’t show the issue.

Proposed fix
• Center remove button relative to row (top: 50% + transform: translateY(-50%)) instead of fixed thumbnail offset.
• Add row/container min-height and right padding so text-only rows still reserve space for the control.

AI-Generated: Yes (Used Claude 4.6 Sonnet to fix the issue, manually reviewed/verified the fix).

Closes #3591987 (closed)

Merge request reports