Page MenuHomePhorge

Always ellipsize long filename in file upload dialog
ClosedPublic

Authored by aklapper on Jul 14 2023, 09:27.

Details

Summary

Firefox does not ellipsize long filenames after selecting them in the File Upload dialog; Chromium does (for unknown reasons).

Could hardcode the "remaining" width for the <input> element itself (approx. 340px) based on calculating the CSS widths and margins of all surrounding elements but that is error-prone if CSS for one of those surrounding elements ever changed.
Thus instead use max-width: stretch for the <input> element itself. Per its limited support (see https://caniuse.com/?search=max-width), set also -moz-available (https://bugzilla.mozilla.org/show_bug.cgi?id=1495868) and -webkit-fill-available (see https://bugs.chromium.org/p/chromium/issues/detail?id=611857) aliases.

Closes T15553

Test Plan
  • Both in Firefox and in Chromium, go to an existing task, select "File Upload", select a file with a long name.
  • See that the filename is now correctly ellipsized in Firefox.
  • See no changes in Chromium.

Diff Detail

Repository
rP Phorge
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

Thanks! What do we think about affecting only file upload buttons? Example:

.aphront-form-input > input[type="file"] {
  ...
}

It seems the above selector works in Chrome/FF/IE - (IE10/9/8/7).

https://stackoverflow.com/a/25825731

Make change less intrusive/dangerous by reducing CSS scope to "type=file" input

Thanks for finding that! Yes, makes a lot of sense to reduce that scope

Rebased with master and tested :) Nice thanks! Sorry for waiting

lgtm

This revision is now accepted and ready to land.Jul 28 2023, 17:25