[HOLD #10312] Chat - Text "New Message" is out alignment in badge.

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to staging.new.expensify.com and log in
2. Navigate to a 1:1 conversation that has a large history of messages.
3. Scroll the conversation a little and tap hold/hover over a message from the other user and mark the message as "Unread"
4. Scroll further up the conversation and verify a "New Messages" button appears

Expected Result:

All text should be in correct alignment in the app.

Actual Result:

Text "New Message" is out alignment in badge.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.36.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[adhamhassan99]

I also realized something, when I mark a message as unread and focus a different message then come back to the earlier marked message it appears as if it didn't register as unread.

[aneequeahmad]

PROPOSAL

Problem:

Css property styles.alignItemsCenter was missing in the file floatingMessageCounter on line # 81 in the view which was

 <View style={[styles.flexRow]}> 

Solution:

Adding styles.alignItemsCenter in line # 81 fixes the issues

App/src/pages/home/report/FloatingMessageCounter/index.js

Line 81 in 30d5a21

<View style={[styles.flexRow, styles.alignItemsCenter]}>

Do nothing for this issue as this will be fixed when the version 1.2.36-0 is deployed on production as this problem has been fixed by merging the PR #10312 in the main which is done today in commit #aed921f1f8

[sonialiap]

Can confirm the same behavior

[melvin-bot]

Triggered auto assignment to @PauloGasparSv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[sonialiap]

@adhamhassan99 please open a new issue for this

I also realized something, when I mark a message as unread and focus a different message then come back to the earlier marked message it appears as if it didn't register as unread.

[PauloGasparSv]

Thank you very much @aneequeahmad! I just tested main and the changes you suggested that already exist in the P.R. #10312 align the badge vertically.

Before changes:

After Changes:

I'll put the GH on HOLD #10312 is deployed to staging. Then I'll test again but on my physical device and close this if the issue doesn't persist. I'll also add evidence for all platforms here when I do that.

[PauloGasparSv]

The P.R. was deployed to staging, the Web versions seems fixed:

But the mobile version is still not aligned for me here. I'm testing on the iOS and Android emulator to see if the fix only worked for web.

[PauloGasparSv]

The emulated latest version of main has the correct alignment (had to confirm that) so it may be a problem with the version in my phone. I'll wait till the next TestFlight version of the app is released to test again and close this.

[PauloGasparSv]

Great, the pill is aligned on my physical device too!
Closing this off : )

[aneequeahmad]

@PauloGasparSv Thats great,Good to hear that. Am i eligible for the solution that i suggested ? as it fixes the problem like you said and have tested.

[aneequeahmad]

@PauloGasparSv Any thoughts ?

[PauloGasparSv]

Oh my, sorry the delay @aneequeahmad! I had to double check with the team to make sure.

I believe In this case you are not eligible, sorry : /