Fix copy to clipboard in long emails

[luacmartins]

cc @chiragsalian

Details

Also fixed an issue with the space below display name and Email or Phone, as well as copy to clipboard being shown on user's display name. See screenshot below:

Fixed Issues

$ #4076

Tests

1. Open a chat with a user that has a long email address, e.g. applausetester+0118mn@applause.expensifail.com
2. Tap on user's avatar to open their details page
3. Verify that the copy to clipboard icon is visible

QA Steps

Steps above.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

web.mov

Mobile Web

mobile-web.mov

Desktop

desktop.mov

iOS

ios.mov

Android

android.mov

[parasharrajat]

The whole point of using absolute position was that its presence should not affect the layout of the original component.

If we want to remove this feature from the Phone number under the Avatar then it's fine. Otherwise, it would push the phone number under the avatar towards the left.

To fix this just inline the Name and Apply right padding= width of an icon button.

[luacmartins]

The feature was removed from the phone number under the avatar.

[sketchydroide]

LGTM

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging in version: 1.0.80-3🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.81-4🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[mananjadhav]

I am tagging this PR to highlight an issue fixed here. All conditions in ternary expressions or left-hand operands on conditional renders, should be boolean. This PR is one of the PRs that uses conditional render with string operands, hence I am tagging it here for the contributors to check.

We've also updated the item in the checklist with this PR to avoid this issue in the future.