Page MenuHomePhabricator

Cut off Project names in policy dropdown indiscernible - need `text-overflow: ellipsis` & a tooltip instead
Closed, ResolvedPublic

Assigned To
None
Authored By
eliaspro
Mar 7 2017, 8:00 PM
Referenced Files
F3826086: pasted_file
Mar 7 2017, 9:25 PM
F3822771: pasted_file
Mar 7 2017, 8:00 PM
Subscribers

Description

Similar to T12366: Long Project names outgrow dropdown widget - long project names (see screenshot below) cause some issues in the policy dropdown list.
Although there's still plenty of space, they're cut off - leaving multiple indiscernible (due to a common prefix) projects in the list.

pasted_file (103×298 px, 3 KB)

How to Reproduce?

  • Create multiple projects with long names and the same prefix, e.g.:
    • Group: Development
    • Group: Development: External
    • Group: Development: External: Project#A
    • Group: Development: Internal: Applications
  • Open any dialog which allows to define an ACL
  • Try to select one of the projects from the policy dropdown

What happens

  • The long project names are cut off prematurely
  • The long project names are indiscernible

What should happen

  • The project names shouldn't be cut off server-side, but using CSS' text-overflow: ellipsis property so the remaining space would be fully used, reducing the chances of ending up with indiscernible projects in the list
  • Each project should have a tooltip (similar to the ones in the main application menu) which shows the full project name when hovering it.

Version Information

  • phabricator 129483d5eac4a0a25f832f6ce57eebf72d610948 (Tue, Mar 7)
  • arcanist 3b6b523c2b236e3724a1e115f126cb6fd05fa128 (Sat, Feb 18)
  • phutil 13a200ca7621ab2b48a0c395f52f8c4411bbc686 (Sat, Mar 4)

Revisions and Commits

Restricted Differential Revision

Event Timeline

This is working as intended. If you choose significantly long project names, many pieces of Phabricator will naturally become less useful and more difficult for you users to use.

I agree that long project names might a problem on its own - but for now this was a compromise I had to make to compensate for the fact that projects are just "generic" containers which can't be further classified to distinguish between ACL groups/projects/tags.

On the other hand, seeing whitespace not used and cut-off text at the same time triggers my UI OCD :)

We can look at the server side issue, but we already have text-overflow on this element, so it's not going to resolve the core problem.

Server side reduces this quite a bit:

pasted_file (404×632 px, 39 KB)

But other interfaces around Phabricator are not going to fair as well, just FYI.

chad added a revision: Restricted Differential Revision.Mar 7 2017, 9:29 PM
chad closed this task as Resolved by committing Restricted Diffusion Commit.Mar 8 2017, 12:38 AM
chad added a commit: Restricted Diffusion Commit.