App: [$1000] Baseline of the recipient name and message preview do not line up in LHN

@anmurali I think you paid me twice. Can you request a refund of $1k? TIA

Regression Test Proposal

1. Set Priority mode to focus in preferences
2. Observe the chat list in the LHN
3. Verify each of the items is displayed correctly in the LHN, baseline of the recipient name and message preview should be aligned

Do we agree 👍 or 👎

@aneequeahmad If you have limited availability, I can create a PR as well.

@anmurali, could you take a look at this please?

@aneequeahmad There’s an issue on Android with alignment. Can you take a look? https://github.com/Expensify/App/pull/15319

@aneequeahmad I’m on it.

I agree, combining both solutions is the best approach 🎀👀🎀 C+ reviewed!

@luacmartins On web, there couldn’t be a better fix then using the native align-items: baseline. Since its not implemented properly on react-native, that does not mean that we should not use it on web. I think combining both of these solutions make more sense here.

Thanks for the summary @aneequeahmad! IMO we should use the same solution we implemented for the sender name + timestamp. Does that not work here? Is that Proposal 2 you mentioned above?

@chiragsalian There was another same misalignment issue of name and date and that is fixed and deployed on production.

There is no android specific check used in this fix, here is the PR for code reference. Maybe @luacmartins can give an opinion that would help us to decide the solution for this problem and also create a reusable single style

@aneequeahmad, hmm that’s odd. I also tested on web on macOS chrome and i see the message off by 1 or 2px 🤷‍♂️ Maybe @eVoloshchak can double-check.

@chiragsalian, I also see the message being off by 2px

I’m confused as to why first message is more off that the second

@shawnborton You’re right platform-specific solution isn’t bullet proof, Also, adding 1px padding isn’t bullet proof as well. This issue is fixed by my proposal which is simple and a well tested fact by the community

There are two Texts in a line view and the two Text fonts are different then the Text with a smaller font size can only be used with a different font-size when it doesn’t the line-height and height attributes. In this case, both texts can be centered

I have tested on Android, IOS, Web/Desktop its working fine.

Note: Also i have noticed that the current issue also exist on Android but its less than 1px. Which is also fixed by my proposal.

will consider the bottom of the text for all child items which leads to line height increment.

Personally I think this is fine, it doesn’t actually increase the line height per se, just the height of the wrapper that wraps the sender and preview line. Either way though, it looks optically vertically centered which is what we want. So using baseline is still my preference.