Page MenuHomePhorge

Always ellipsize long filename in file upload dialog

Authored by aklapper on Jul 14 2023, 09:27.
Referenced Files
Unknown Object (File)
Thu, Sep 21, 11:25
Unknown Object (File)
Tue, Sep 12, 19:34
Unknown Object (File)
Sun, Sep 10, 06:56
Unknown Object (File)
Sun, Sep 3, 16:38
Unknown Object (File)
Sun, Sep 3, 08:44
Unknown Object (File)
Sun, Aug 27, 17:01
Unknown Object (File)
Sun, Aug 27, 17:01
Unknown Object (File)
Aug 23 2023, 09:22



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, set also -moz-available ( and -webkit-fill-available (see 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

rP Phorge
Lint Not Applicable
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).

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


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