revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-19 16:58:48 +02:00
Code Issues Releases Wiki Activity

Always ellipsize long filename in file upload dialog

Browse source 
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
This commit is contained in:
Andre Klapper 2023-07-29 12:12:49 +03:00
parent 189a5d6047
commit fa687b4ba0
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/celerity/map.php
View file

@ -9,7 +9,7 @@ return array(
'names' => array( 'names' => array(
'conpherence.pkg.css' => '76ed87e3', 'conpherence.pkg.css' => '76ed87e3',
'conpherence.pkg.js' => '020aebcf', 'conpherence.pkg.js' => '020aebcf',
'core.pkg.css' => 'e51a98e2', 'core.pkg.css' => '67a5ecf3',
'core.pkg.js' => '2eeda9e0', 'core.pkg.js' => '2eeda9e0',
'dark-console.pkg.js' => '187792c2', 'dark-console.pkg.js' => '187792c2',
'differential.pkg.css' => '525f9a1d', 'differential.pkg.css' => '525f9a1d',
@ -154,7 +154,7 @@ return array(
'rsrc/css/phui/phui-document.css' => '52b748a5', 'rsrc/css/phui/phui-document.css' => '52b748a5',
'rsrc/css/phui/phui-feed-story.css' => 'a0c05029', 'rsrc/css/phui/phui-feed-story.css' => 'a0c05029',
'rsrc/css/phui/phui-fontkit.css' => '1ec937e5', 'rsrc/css/phui/phui-fontkit.css' => '1ec937e5',
'rsrc/css/phui/phui-form-view.css' => '7536aef9', 'rsrc/css/phui/phui-form-view.css' => '57edecb7',
'rsrc/css/phui/phui-form.css' => 'd1adb52c', 'rsrc/css/phui/phui-form.css' => 'd1adb52c',
'rsrc/css/phui/phui-formation-view.css' => 'd2dec8ed', 'rsrc/css/phui/phui-formation-view.css' => 'd2dec8ed',
'rsrc/css/phui/phui-head-thing.css' => 'd7f293df', 'rsrc/css/phui/phui-head-thing.css' => 'd7f293df',
@ -849,7 +849,7 @@ return array(
'phui-font-icon-base-css' => '303c9b87', 'phui-font-icon-base-css' => '303c9b87',
'phui-fontkit-css' => '1ec937e5', 'phui-fontkit-css' => '1ec937e5',
'phui-form-css' => 'd1adb52c', 'phui-form-css' => 'd1adb52c',
'phui-form-view-css' => '7536aef9', 'phui-form-view-css' => '57edecb7',
'phui-formation-view-css' => 'd2dec8ed', 'phui-formation-view-css' => 'd2dec8ed',
'phui-head-thing-view-css' => 'd7f293df', 'phui-head-thing-view-css' => 'd7f293df',
'phui-header-view-css' => '36c86a58', 'phui-header-view-css' => '36c86a58',

5
webroot/rsrc/css/phui/phui-form-view.css
View file

@ -63,6 +63,11 @@
color:{$greytext} !important; color:{$greytext} !important;
} }
.aphront-form-input > input[type="file"] {
max-width: stretch;
max-width: -moz-available;
max-width: -webkit-fill-available;
}
.aphront-form-error { .aphront-form-error {
width: 18%; width: 18%;