Fix custom file truncation

[MartijnCuppens]

Closes #28497

Alternative approach which doesn't depend on the width of the browse button. This solution is also compatible with the non-.text-truncate custom input, the text just gets cut off in that case.

[alecpl]

Is this position:relative needed?

[MartijnCuppens]

z-index: 3 is set on this for some reason, not sure why but I didn't want to break anything I wasn't aware of. I'll have a look at why this was set and maybe we can indeed remove this.

[alecpl]

I'm not sure this is supported scenario, but that margin trick will not work with .form-control-lg/.form-control-sm without additional code.

[MartijnCuppens]

Good point, I'll have a look at that

[ysds]

I’m not a big fan of the current(v4) implementation using CSS content for the "Browse" text. It seems a bit tricky.

If DOM changes are allowed in v5, I'd like to propose like a following change:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">
    <span class="custom-file-text">Choose file</span>
    <span class="custom-file-button">Browse</span>
  </label>
</div>

This will not need negative margins.

[MartijnCuppens]

I'm going to close this after feedback from @ysds & @alecpl. I think we should go the way @ysds is suggesting. I think we can also ditch the attr() hack mentioned here: #25497.

@ysds, could you have a look at this one of these days? (no pressure on this)