From e586ed439a790f2087948ecf701695cad9955700 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Thu, 28 Mar 2019 17:39:28 -0700
Subject: [PATCH] Improve overflow/ellipsis behaivor for very wide task graphs

Summary:
See downstream <https://phabricator.wikimedia.org/T171648>. The `T123 Task Name` column in graphs can currently fold down to 0 pixels wide.

Although it's visually nice to render this element without a scroll bar when we don't really need one, the current behavior is excessive and not very useful.

Instead, tweak the CSS so:

  - This cell is always at least 320px wide.
  - After 320px, we'll overflow/ellipsis the cell on small screens.

This generally gives us better behavior:

  - Small screens get a scrollbar to see a reasonable amount of content.
  - The UI doesn't turn into a total mess if one task has a whole novel of text.

Test Plan:
Old behavior, note that there's no scrollbar and the cell is so narrow it is useless:

{F6320208}

New behavior, same default view, has a scrollbar:

{F6320209}

Scrolling over gives you this:

{F6320210}

On a wider screen (this wide or better), we don't need to scroll:

{F6320211}

Reviewers: amckinley

Reviewed By: amckinley

Differential Revision: https://secure.phabricator.com/D20345
---
 resources/celerity/map.php              | 6 +++---
 webroot/rsrc/css/aphront/table-view.css | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index fce6b89474..4912f91b08 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '3c8a0668',
     'conpherence.pkg.js' => '020aebcf',
-    'core.pkg.css' => '2dd936d6',
+    'core.pkg.css' => '7e6e954b',
     'core.pkg.js' => 'a747b035',
     'differential.pkg.css' => '8d8360fb',
     'differential.pkg.js' => '67e02996',
@@ -30,7 +30,7 @@ return array(
     'rsrc/css/aphront/notification.css' => '30240bd2',
     'rsrc/css/aphront/panel-view.css' => '46923d46',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'f8a0c1bf',
-    'rsrc/css/aphront/table-view.css' => '205053cd',
+    'rsrc/css/aphront/table-view.css' => '7dc3a9c2',
     'rsrc/css/aphront/tokenizer.css' => 'b52d0668',
     'rsrc/css/aphront/tooltip.css' => 'e3f2412f',
     'rsrc/css/aphront/typeahead-browse.css' => 'b7ed02d2',
@@ -531,7 +531,7 @@ return array(
     'aphront-list-filter-view-css' => 'feb64255',
     'aphront-multi-column-view-css' => 'fbc00ba3',
     'aphront-panel-view-css' => '46923d46',
-    'aphront-table-view-css' => '205053cd',
+    'aphront-table-view-css' => '7dc3a9c2',
     'aphront-tokenizer-control-css' => 'b52d0668',
     'aphront-tooltip-css' => 'e3f2412f',
     'aphront-typeahead-control-css' => '8779483d',
diff --git a/webroot/rsrc/css/aphront/table-view.css b/webroot/rsrc/css/aphront/table-view.css
index a08674cf14..fd1a918148 100644
--- a/webroot/rsrc/css/aphront/table-view.css
+++ b/webroot/rsrc/css/aphront/table-view.css
@@ -229,7 +229,8 @@ span.single-display-line-content {
   word-wrap: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 0;
+  min-width: 320px;
+  max-width: 320px;
 }
 
 .aphront-table-view tr.closed td.object-link .object-name,