[$250] Mac / Firefox - Composer height increases on adding emoji reported by @daraksha-dk

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

---

Action Performed:

1. Open a chat
2. Add emoji to the message composer

Expected Result:

Composer height should not increase

Actual Result :

Composer height increases

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web - Mac / Firefox

Version Number: v1.2.28 Reproducible in staging?: y Reproducible in production?: y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos:

https://user-images.githubusercontent.com/43996225/202010791-3747c86d-cda0-47a7-a982-44efb7211f39.mov

Upwork URL: https://www.upwork.com/jobs/~01275834e00548fe27 Issue reported by: @daraksha-dk Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1668510274384019

View all open jobs on GitHub

[Julesssss]

The scrollHeight for emojis in Firefox is greater than lineHeight

Nice find. Would each browser use a different default though?

[fedirjh]

@trjExpensify a quick look, you can reproduce in the edit input too , the scrollHeight for emojis in Firefox is greater than lineHeight this will make number of rows = 2 for first input

The solution is to increase lineHeight to match the scrollHeight , but make sure to run tests against any changes when editing the compose styles as it is easy to introduce regressions

https://github.com/Expensify/App/blob/12dd4c6ea78e2454938ca9bf720d4e1b64d31ef0/src/styles/styles.js#L1396

-        lineHeight: 20,
+        lineHeight: 21,

Test Firefox

Before

After