Fix ellipsis in DisplayNames - 2

[CamilaRivera]

Details

Add display: inline-block in web to make ellipsis work.

Fixed Issues

$ #6913

Tests | QA Steps

1. Open app
2. Create a group with multiple contacts
3. Check LHN for the group with multiple contacts, it should show an ellipsis if the names don't fit
4. Create a contact with a long email to check it also shows an ellipsis at the end
5. Check in the search page the same behavior as LHN

Expected result: You should see the ellipsis for all cases above.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Chrome Android

Safari IOS

Desktop

iOS

Android

[parasharrajat]

@CamilaRivera Let's find the real cause why this is not working natively. Why RN-web is using multiline styles.

[Beamanator]

Also since you tested on mobile web & desktop would you please provide some screenshots? :D (also for ios and android if you're able to test there)

[CamilaRivera]

@CamilaRivera Let's find the real cause why this is not working natively. Why RN-web is using multiline styles.

Not sure what you mean about "multiline styles", but this is what I found:

The base requirements for the ellipsis, according to this SO, are:

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

and a constrained width. We are missing this last part because of the display: -webkit-box currently being set. Haven't found why that is set like that.

[CamilaRivera]

Also since you tested on mobile web & desktop would you please provide some screenshots? :D (also for ios and android if you're able to test there)

@Beamanator Updated the description with screenshots

[parasharrajat]

I meant the same thing display: -webkit-box is multiline styles. So Now I would wait before merging this and request you to do some analysis on finding the root cause. If we are not able to determine then we can proceed with this approach which is a hacky solution.

This problem is coming due to the recent upgrade of RN-web. But is this a bug with RN-web or an issue in our repo?

[parasharrajat]

Here is the issue with RN-web necolas/react-native-web#2186. Let's wait for the solution

[parasharrajat]

I have submitted a fix for RN-web necolas/react-native-web#2193 which should be merged soon and then this issue will be fixed.

[Beamanator]

Closing since the fix was made in react-native-web (our fork, for now)