Custom file input overflow when selecting multiple files

[jacobmllr95]

When the `multiple' property on a custom file input is enabled and a user selects a lot of files, the filenames overflow the file input.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFiles" multiple>
  <label class="custom-file-label" for="customFile">Choose files</label>
</div>

This overflow issues can be easy fixed by adjusting the .custom-file-label styles a bit:

.custom-file-label {
  white-space: nowrap;
  overflow-x: hidden;
}

[mdo]

This likely needs two separate patches, one for v4.x and one for v5 since we rewrote the component there.

[ms-yogi]

@mdo Can I take this?

[mdo]

@ms-yogi Go for it!

[XhmikosR]

Is this still an issue with the latest v4-dev? We landed a patch recently #32145.

@patrickhlauke

[patrickhlauke]

the patch #32145 fixed the size of the hidden input, not the visible label, so the issue is/was still there. made a patch #32160 (but only added overflow:hidden ... not sure what the benefit/use of the suggested white-space:nowrap was ... happy to add that too if that can be explained a bit?)

v5 is unaffected by this problem, as it uses a completely different approach

[XhmikosR]

#32160 was merged, thanks @patrickhlauke!