[HOLD] Message preview in focus mode is not aligned with user name

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel! https://www.upwork.com/jobs/~012ff356b5e14b72c7

---

Action Performed:

1. Log in to e.cash and enable focus mode
2. Check the message previews in LHN

Expected Result:

Message preview should be aligned with user name.

Actual Result:

Message preview is not aligned with user name. It's more visible if the user has an unread message.

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App
Mobile Web

Version Number: 1.0.79-0

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

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @joaniew https://expensify.slack.com/archives/C01GTK53T8Q/p1626390187374600?thread_ts=1626387107.365600&cid=C01GTK53T8Q

Also the text doesn’t look aligned correctly

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

We have applied a height of 18px to the chat title and if we remove that it fixes two issues.
this one & #4074

Edit:
Another solution would be to set the line height to 18 equal to the height of 18.

[yuwenmemon]

@parasharrajat interesting, I'm confused how that fixes it because the line-height pointed to for #4074 is 20px?

[parasharrajat]

yes, Line-height is 20 so text will expand vertically but height is set to 18, and overflow is hidden so 2px will be trimmed.

To test this. just set the height to 15px at https://github.com/Expensify/Expensify.cash/blob/47494884adb24d23226edb0eb7d22d8240ecf979/src/styles/styles.js#L801-L806

I moving the context to #4074 for more discussion on that issue.

[laurenreidexpensify]

https://www.upwork.com/jobs/~012ff356b5e14b72c7