[Bug] Edit button overflows container for extra wide images

BSoDium commented 2 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Have you updated FilePond and its plugins?

[X] I have updated FilePond and its plugins

Describe the bug

The edit button overflows the image container when the image is very wide and not high enough displaying on top of the "Upload completed" message. An easy fix could involve displaying that button inline next to the deletion one for exotic sizes such as this one, or setting a minimum height for the container.

Reproduction

Go to https://pqina.nl/filepond/#examples and upload a very wide image (tested with 2616 × 372px), the result can be seen below:

CleanShot 2024-08-15 at 11 02 36@2x

Environment

- Device: Macbook Air M1
- OS: MacOS Sonoma 14.6.1 (23G93)
- Browser: Chrome version 127.0.6533.100 (Official Build) (arm64)

rikschennink commented 2 months ago

You could set a fixed styleItemPanelAspectRatio that will center the image in a box of the given aspect ratio.

BSoDium commented 2 months ago

Totally agree! This is easily fixable, but I think it could be cool if the bug didn't happen in the first place.

rikschennink commented 2 months ago

@BSoDium certainly something I'm looking into for v5

pqina / filepond