Fix custom file input overflow with too long filenames

[MicroDroid]

No description provided.

[MartijnCuppens]

@MicroDroid, could you provide a (Codepen) demo of what exactly this fixes?

[MicroDroid]

@MartijnCuppens there you go https://codepen.io/OverCoder/pen/PLQxaJ

Select a file with a huge filename (or multiple files).

[XhmikosR]

For me it doesn't fix the issue when the overflow: hidden is added in the input. It works if it's specified in .custom-file.

[Johann-S]

I made an example on how to handle that see here: https://bs-custom-file-input.netlify.com/
Example: Example with label containing a child

[MicroDroid]

Oh, that's right, it's my fault I added the property to the wrong selector.

That said, can you see the updated pen? I kind of implemented something similar to what @Johann-S had but with padding instead of hardcoding a 75% width, thus to fill out the entire space properly.

I am not sure using 80px is safe though, and assuming a non-monospace font, I have no idea how to calc() the exact right padding.

If it looks right I'll push it here.

[alecpl]

Reference: #26933. See my solution there.

[MicroDroid]

Alright, based on @foxleigh81's approval I'm going to push the fix I've implemented in the pen in a few moments.

[XhmikosR]

Fixed in #28511