mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-09 16:32:39 +01:00
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
This commit is contained in:
parent
189a5d6047
commit
fa687b4ba0
2 changed files with 8 additions and 3 deletions
|
@ -9,7 +9,7 @@ return array(
|
|||
'names' => array(
|
||||
'conpherence.pkg.css' => '76ed87e3',
|
||||
'conpherence.pkg.js' => '020aebcf',
|
||||
'core.pkg.css' => 'e51a98e2',
|
||||
'core.pkg.css' => '67a5ecf3',
|
||||
'core.pkg.js' => '2eeda9e0',
|
||||
'dark-console.pkg.js' => '187792c2',
|
||||
'differential.pkg.css' => '525f9a1d',
|
||||
|
@ -154,7 +154,7 @@ return array(
|
|||
'rsrc/css/phui/phui-document.css' => '52b748a5',
|
||||
'rsrc/css/phui/phui-feed-story.css' => 'a0c05029',
|
||||
'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-formation-view.css' => 'd2dec8ed',
|
||||
'rsrc/css/phui/phui-head-thing.css' => 'd7f293df',
|
||||
|
@ -849,7 +849,7 @@ return array(
|
|||
'phui-font-icon-base-css' => '303c9b87',
|
||||
'phui-fontkit-css' => '1ec937e5',
|
||||
'phui-form-css' => 'd1adb52c',
|
||||
'phui-form-view-css' => '7536aef9',
|
||||
'phui-form-view-css' => '57edecb7',
|
||||
'phui-formation-view-css' => 'd2dec8ed',
|
||||
'phui-head-thing-view-css' => 'd7f293df',
|
||||
'phui-header-view-css' => '36c86a58',
|
||||
|
|
|
@ -63,6 +63,11 @@
|
|||
color:{$greytext} !important;
|
||||
}
|
||||
|
||||
.aphront-form-input > input[type="file"] {
|
||||
max-width: stretch;
|
||||
max-width: -moz-available;
|
||||
max-width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.aphront-form-error {
|
||||
width: 18%;
|
||||
|
|
Loading…
Reference in a new issue