Fix: Tooltip and message date position

[rdjuric]

Details

1. Style changes to make the Tooltip responsive instead of fix width.
2. Apply the Tooltip containerStyle in index.native.js for consistency across platforms
3. Fixes the message timestamp to the same line as the displayName

Fixed Issues

Fixes an issue with the below PR where the Tooltip and the Timestamp of a message would me misplaced.
$ PR #3830

Tests

1. Open any chat
2. Check that the timestamp is line with the displayName
3. Hoover over the displayName
4. The Tooltip should show close to your cursor

QA Steps

Same as above.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

web.mov

Mobile Web

mWeb.mp4

Desktop

desktop.mov

iOS

iOS.mp4

Android

video.mp4

[Luke9389]

@rdjuric in the future, with regressions, feel free to continue to tag and request reviews from engineers that are connected to the original issue

[rdjuric]

@rdjuric in the future, with regressions, feel free to continue to tag and request reviews from engineers that are connected to the original issue

Makes sense! Will do that in the future @Luke9389

[Luke9389]

linking this to the original issue: #3172

[rdjuric]

Update made @Luke9389!

Changed our containerStyles to receive an array in our Tooltip and Hoverable to keep styling consistent across our code. Nice catch, thanks.

[rdjuric]

Made a few changes after your comments @parasharrajat. Thanks!

[rdjuric]

Updated @Luke9389

[Luke9389]

Just a few more small things

[rdjuric]

Updated @Luke9389

[Luke9389]

OK, this is lookin' good. Can you be sure to retest on all 5 platforms with the most recent version of the code before we wrap this up?

[rdjuric]

OK, this is lookin' good. Can you be sure to retest on all 5 platforms with the most recent version of the code before we wrap this up?

Will start retesting and tag you here once it's done!

[Luke9389]

Thanks! (I know it's a pain but I've seen looooots of regressions caused by skipping this final step)

[rdjuric]

@Luke9389

I tested this branch and the PR worked correctly. I merged it into our main branch locally just to make sure things were okay and looks like this commit 7729fc0 had a regression - it nullified the styling changes we made on the previous PR #3830.

That's why we have this Tooltip/message date bug on prod (where the avatar and the display name aren't wrapped in the Pressable) but not on staging (where they're wrapped in a Pressable)

To make our change work with the Pressable we need to move our flexShrink1 from the ToolTip to the Pressable component. The updated videos on the PR are from the latest commit, where I made this change.

I kept our containerStyle -> containerStyles changes even thought we're no longer passing any styling to the ToolTip because I think they make the code more consistent, but let me know if you think differently.

[Luke9389]

OK, that sounds fine to me 👍

[rdjuric]

Can we merge this? @Luke9389

[Luke9389]

was just testing on all platforms myself as well :)

[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.

[rdjuric]

Thanks, @Luke9389! Sorry for missing this regression on the first PR.

[OSBotify]

🚀 Deployed to staging in version: 1.0.77-6🚀

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

[OSBotify]

🚀 Deployed to production in version: 1.0.79-4🚀

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