From fa687b4ba0116593f502ffd3f2bfdadf55859240 Mon Sep 17 00:00:00 2001
From: Andre Klapper <a9016009@gmx.de>
Date: Sat, 29 Jul 2023 12:12:49 +0300
Subject: [PATCH] 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
---
 resources/celerity/map.php               | 6 +++---
 webroot/rsrc/css/phui/phui-form-view.css | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 29bc9d9eb8..17a93021a4 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -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',
diff --git a/webroot/rsrc/css/phui/phui-form-view.css b/webroot/rsrc/css/phui/phui-form-view.css
index 47f7d1bb2c..0c5331551e 100644
--- a/webroot/rsrc/css/phui/phui-form-view.css
+++ b/webroot/rsrc/css/phui/phui-form-view.css
@@ -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%;