Odd behaviour of filepond--file in narrow flexbox

[Tom-Evers]

Describe the bug

When the flexbox around a filepond becomes too narrow for the file status message (<div class="filepond--file-status">), the error message overflows the box.

The flexbox container forces the filepond to become too small for its contents (probably due to unfortunate combinations of min-width and overflow settings)

Logs

(Not applicable)

To Reproduce

Important bits of code:

HTML:

<div class="columns">
  <div class="content">
    <h4>Upload preset file</h4>
    <div class="filepond--wrapper">...</div>
  </div>
  <div class="content">
    <h4>Save current preset</h4>
    ...
  </div>
  <div .../>
</div>

CSS:

.columns
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.contents
{
  display: flex;
  flex-direction: column;
}

Expected behavior

The flexbox container should detect that its contents (in this case, the filepond) is too large, and can then flex-wrap.

Stacktraces

(Not applicable)

Information about your project:

Chrome 91.0.4472.124 Windows 10 FilePond 4.28.2

Additional context

(Not applicable)

[rikschennink]

We require the issue template to be filled out on all new issues. The issue template helps us collect all the information we need to address your submission efficiently.

The more information we have, the faster the issue can be resolved.

We will be able to more closely look at your issue once the issue template has been filled out. The issue will be closed until the above is addressed.

Please leave a comment after you've updated the issue.

[Tom-Evers]

@rikschennink Updated. You should know that the template doesn't show when you click "New Issue" without being logged in. When you sign in at that point, GitHub redirects you to an empty issue right away. I didn't know there was a template.

Furthermore, just closing an issue when it's obvious that a user put time into reporting it (I made a bloody gif :P) is a bit harsh.

[rikschennink]

Thanks, good to know, I’m looking to switch to GitHub issue forms to make this more strict.

Please understand that every single day devs open zero effort issues, the only way to separate serious devs from drive by shooters is closing the issue.

I understand this comes over as harsh but it’s the only way I found that “works”.

[Tom-Evers]

More on-topic: Flexboxes combined with min-width are a complete pain in the behind. I still don't quite understand how to tell a stack of flexboxes to "ignore" the minimum width of the text, when it's set to text-overflow: ellipsis.

[rikschennink]

Currently the FilePond item status doesn't wrap, so the only option would be to make sure the filepond container doesn't get this small. Hope to address this in a future release.