Filepond: Handle long validation message at mobile page width

[vvtkachenko]

Hi, it would be nice that filepond could show long validation message at mobile page width.

For example in the CodePen below, if uploaded file is above 1MB - validation message doesnt fit to pond widht and filename is pushed out of pond too.
https://codepen.io/vova-tkachenko/pen/QZBobm

Probably such long messages should have 'max-width' set to width of pond fall down to the next line.

[rikschennink]

It shouldn't overlap/overflow like that, I'll see if I can fix that first and then introduce a different item layout option that has more room for text.

[pbowyer]

Support for this would be awesome. I have users uploading multiple files, so on desktop am using

    @media (min-width: 50em) {
        .filepond--item {
            width: calc(33.33% - .5em);
        }
    }

When an error is returned, it isn't constrained (silly length error message used for emphasis):

Note the 'Upload' and 'Retry' button to the right of the error message are hidden as I have my own upload button which I need users to click.

[Aside: I did this via CSS as setting styleButtonProcessItemPosition to null or false didn't remove them. Is that the best way?]

[rikschennink]

Yes, this is not good. I'll try to give this some more priority.

[pbowyer]

I had a play with the CSS but didn't solve it, sorry. My frontend skills are very rusty...

[pbowyer]

@rikschennink Sorry for chasing, but any chance you can look at this?

[utsha1510]

facing a similar issue where the whole area to drag and upload a file (grey container) appears throughout the width of the page. adding a CSS file didn't work. saw a similar issue in vue.js where it was corrected but I guess not in react. is somebody else facing any such issue?

[rikschennink]

@pbowyer no problem, I'm simply too busy.

This cuts of the text, so at least it doesn't exit the bounding box.

.filepond--file-status {
    overflow: hidden;
    max-width: 50%;
}

For a definitive fix the element should scale in height to make room for the error message, which introduces all kinds of other issues.