recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Always ellipsize long filename in file upload dialog

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.

Reviewers: O1 Blessed Committers, valerio.bozzolan

Reviewed By: O1 Blessed Committers, valerio.bozzolan

Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15553

Differential Revision: https://we.phorge.it/D25347

Andre Klapper fa687b4b 189a5d60

+8 -3
+3 -3
resources/celerity/map.php
··· 9 9 'names' => array( 10 10 'conpherence.pkg.css' => '76ed87e3', 11 11 'conpherence.pkg.js' => '020aebcf', 12 - 'core.pkg.css' => 'e51a98e2', 12 + 'core.pkg.css' => '67a5ecf3', 13 13 'core.pkg.js' => '2eeda9e0', 14 14 'dark-console.pkg.js' => '187792c2', 15 15 'differential.pkg.css' => '525f9a1d', ··· 154 154 'rsrc/css/phui/phui-document.css' => '52b748a5', 155 155 'rsrc/css/phui/phui-feed-story.css' => 'a0c05029', 156 156 'rsrc/css/phui/phui-fontkit.css' => '1ec937e5', 157 - 'rsrc/css/phui/phui-form-view.css' => '7536aef9', 157 + 'rsrc/css/phui/phui-form-view.css' => '57edecb7', 158 158 'rsrc/css/phui/phui-form.css' => 'd1adb52c', 159 159 'rsrc/css/phui/phui-formation-view.css' => 'd2dec8ed', 160 160 'rsrc/css/phui/phui-head-thing.css' => 'd7f293df', ··· 849 849 'phui-font-icon-base-css' => '303c9b87', 850 850 'phui-fontkit-css' => '1ec937e5', 851 851 'phui-form-css' => 'd1adb52c', 852 - 'phui-form-view-css' => '7536aef9', 852 + 'phui-form-view-css' => '57edecb7', 853 853 'phui-formation-view-css' => 'd2dec8ed', 854 854 'phui-head-thing-view-css' => 'd7f293df', 855 855 'phui-header-view-css' => '36c86a58',
+5
webroot/rsrc/css/phui/phui-form-view.css
··· 63 63 color:{$greytext} !important; 64 64 } 65 65 66 + .aphront-form-input > input[type="file"] { 67 + max-width: stretch; 68 + max-width: -moz-available; 69 + max-width: -webkit-fill-available; 70 + } 66 71 67 72 .aphront-form-error { 68 73 width: 18%;