HomePhabricator

Improve overflow/ellipsis behaivor for very wide task graphs

Tags
None
Referenced Files
F6320208: Screen Shot 2019-03-28 at 5.39.37 PM.png
Mar 29 2019, 4:16 AM
F6320210: Screen Shot 2019-03-28 at 5.39.56 PM.png
Mar 29 2019, 4:16 AM
F6320209: Screen Shot 2019-03-28 at 5.39.54 PM.png
Mar 29 2019, 4:16 AM
F6320211: Screen Shot 2019-03-28 at 5.40.11 PM.png
Mar 29 2019, 4:16 AM
Subscribers
None

Description

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:

Screen Shot 2019-03-28 at 5.39.37 PM.png (1×669 px, 237 KB)

New behavior, same default view, has a scrollbar:

Screen Shot 2019-03-28 at 5.39.54 PM.png (1×669 px, 247 KB)

Scrolling over gives you this:

Screen Shot 2019-03-28 at 5.39.56 PM.png (1×669 px, 253 KB)

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

Screen Shot 2019-03-28 at 5.40.11 PM.png (1×953 px, 305 KB)

Reviewers: amckinley

Reviewed By: amckinley

Differential Revision: https://secure.phabricator.com/D20345

Details

Provenance
epriestleyAuthored on Mar 29 2019, 12:39 AM
epriestleyPushed on Mar 29 2019, 4:16 AM
Reviewer
amckinley
Differential Revision
D20345: Improve overflow/ellipsis behaivor for very wide task graphs
Parents
rPc4856c37e7a6: Fix content overflow in user hovercards
Branches
Unknown
Tags
Unknown
Build Status
Buildable 22431
Build 30695: Run Core Tests