Modify line height so text does not get cut off in LHN

[yuwenmemon]

Pullerbearing (@Luke9389)
cc @roryabraham

Details

Fixes a line height so that text is not cut off in Android. h/t @parasharrajat for his comment here: #4074 (comment)

Fixed Issues

$ #4074
$ #4143

Tests/QA

1. Create a chat with multiple participants
2. Open up the LHN, make sure the commas and bottom ligatures of the text are not cut off.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

cd i

iOS

Android

[OSBotify]

⚠️ ⚠️ Heads up! This pull request has the CP Staging label. ⚠️ ⚠️
Merging it will cause it to be immediately deployed to staging, even if the open StagingDeployCash deploy checklist is locked.

[shawnborton]

I don't think we should make this change globally, so please hold on merging this.

[shawnborton]

Okay so based on Rajat's comment, can you just add this lineHeight to the specific area that is being affected on Android? We should not be changing this globally as before Rory's change, the global line height (or at least what we tried to use as much as we could) was 20.

[shawnborton]

So basically just set 18 as the line height on optionDisplayName

[yuwenmemon]

@shawnborton They're already at 18: https://github.com/Expensify/Expensify.cash/blob/0639c6771204ceb1c91926813fb2b3368c49a8b6/src/styles/styles.js#L803-L804

I can just set them to 20 to match the default? That also fixed the issue:

[shawnborton]

Ah got it. Okay, I am cool with making these 20 line height so long as the line below is at 16 line height. Then, assuming there is a 4px gap between them, we get a total height of 40px which matches the avatar to the left.

[yuwenmemon]

Ah got it. Okay, I am cool with making these 20 line height so long as the line below is at 16 line height.

Cool! That they are:

App/src/styles/styles.js

Lines 822 to 828 in f8c358e

	optionAlternateText: {
	color: themeColors.textSupporting,
	fontFamily: fontFamily.GTA,
	fontSize: variables.fontSizeLabel,
	height: 16,
	lineHeight: 16,
	},

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[parasharrajat]

Please test it on #focus mode. The issue is mainly visible in that case.

[yuwenmemon]

@parasharrajat I assume you're referring to #4137?

Looks good too!

[parasharrajat]

Nice. There is one more place to look at the Report header. It is also affected by the same issue.

[yuwenmemon]

@parasharrajat I'm sorry, but can you please point to an issue or something displaying what you're talking about?

[parasharrajat]

Here you go

[yuwenmemon]

I think we're good there, here's a header with some letters with bottom-y parts on my branch, nothing is cut off?

[yuwenmemon]

Gonna merge this since Luke is OOO

[OSBotify]

🚀 Deployed to staging in version: 1.0.79-3🚀

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

[isagoico]

Tested this on:

• Web
• Android
• iOS
• Desktop
  And all were a pass! 🎉

[OSBotify]

🚀 Deployed to production in version: 1.0.79-4🚀

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

[OSBotify]

🚀 Deployed to staging in version: 1.0.79-5🚀

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

[OSBotify]

🚀 Deployed to production in version: 1.0.80-2🚀

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