Page MenuHomePhabricator

[web] Handle longer usernames in friend list
ClosedPublic

Authored by tomek on Apr 27 2022, 10:10 AM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Nov 28, 7:53 AM
Unknown Object (File)
Thu, Nov 28, 6:48 AM
Unknown Object (File)
Thu, Nov 28, 4:41 AM
Unknown Object (File)
Fri, Nov 22, 4:34 PM
Unknown Object (File)
Wed, Nov 20, 12:54 PM
Unknown Object (File)
Wed, Nov 13, 10:44 AM
Unknown Object (File)
Sat, Nov 9, 10:48 PM
Unknown Object (File)
Tue, Nov 5, 3:43 AM

Details

Summary

When a username is longer than available space, we should display an ellipsis at its end, just like we do in other places. We also need to make sure that the text in a button doesn't wrap.

friend_list_long.png (1×1 px, 91 KB)

Test Plan

Send a friend request to a user with long username and check if the name is displayed correctly on friend list.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

When a username is longer than available space, we should display an ellipsis at its end, just like we do in other places.

Makes sense


We also need to make sure that the text in a button doesn't wrap.

Is this because if the username is too long it pushes the button text past the right edge of the container div?

I'd guess that if we're setting the button text we'd be able to ensure it wouldn't overflow? If that is the issue, we should be able to solve it by making the buttons flex: 1 or something?

I think it'd be good to avoid letting users take actions that they can't fully read?

This revision is now accepted and ready to land.Apr 27 2022, 1:34 PM

We also need to make sure that the text in a button doesn't wrap.

Is this because if the username is too long it pushes the button text past the right edge of the container div?

I'd guess that if we're setting the button text we'd be able to ensure it wouldn't overflow? If that is the issue, we should be able to solve it by making the buttons flex: 1 or something?

I think it'd be good to avoid letting users take actions that they can't fully read?

The default behavior is that the button content is fully visible, but because text consists of two words, they are put in two lines. By using nowrap we make sure that the content is exactly one line. Regarding overflow I checked it and it isn't necessary (will update the diff). But overall, because the username always can shrink, the button will always be fully visible.

Delete unnecessary css property