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

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.