Page MenuHomePhabricator

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

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.

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

eliaspro created this task.Mar 7 2017, 8:00 PM
chad added a subscriber: chad.Mar 7 2017, 9:02 PM

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 :)

chad added a comment.Mar 7 2017, 9:14 PM

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.

chad added a comment.Mar 7 2017, 9:25 PM

Server side reduces this quite a bit:

chad added a comment.Mar 7 2017, 9:25 PM

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