[HOLD for payment 2024-06-11] [$250] Edit Message - Emoji’s are cut in half when in Edit message mode

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.75-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+emilio@applause.expensifail.com
Issue reported by: Applause - Internal Team

Issue found when executing PR #41027

Action Performed:

1. Open the New Expensify App
2. Sign into a valid account
3. Go to any chat
4. Send an emoji (Only an Emoji so that the Emoji is larger than normal)
5. Tap on "Edit Message" option

Expected Result:

User expects the Edit message composer to open and the emoji to be fully visible as before

Actual Result:

The Emoji is cut in half

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6489496_1716474938157.Emoji_is_cut_off_when_in_edit_message_mode.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ba75049d57ad65eb
• Upwork Job ID: 1794204477867704320
• Last Price Increase: 2024-05-25

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@jliexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[jliexpensify]

Can repro, going to assign @Ollyws as he was C+ on the PR.

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Emojis are cut when in large size in edit composer.

What is the root cause of that problem?

When the composer only contains emoji, we set the size to be bigger, but the line height is still small. We use this line height.

App/src/styles/index.ts

Line 2090 in 8375abe

lineHeight: variables.lineHeightXLarge,

We then fix this in #41027 by applying a bigger line height if the composer only contains emoji, but we only apply the fix to the main composer.

What changes do you think we should make in order to solve the problem?

We can move the fix to Composer/index.tsx and Composer/index.native.tsx and append it to RNMarkdownTextInput style.

App/src/components/Composer/index.native.tsx

Line 82 in 8375abe

style={[composerStyle, maxHeightStyle]}

[Ollyws]

@bernhardoj's proposal LGTM.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @rlinoz, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[bernhardoj]

PR is ready

cc: @Ollyws

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ba75049d57ad65eb

[melvin-bot]

Current assignee @Ollyws is eligible for the External assigner, not assigning anyone new.

[charmer1025]

I think it is related to CSS position problem.
I can fix it right now.

[melvin-bot]

📣 @charmer1025! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[parasharrajat]

Let's hold this issue. It might become redundent after we are done with #40692

[bernhardoj]

I know it's a native issue only, but #40692 only applies the line-height fix on the native.

The current condition is:
The line-height fix is applied for all platforms, but only in the main composer (ComposerWithSuggestions)

#40692:
The line-height fix from the current condition stays the same. In addition, the line-height fix is applied to both the main and edit composer (Composer), but only on the native

My PR:
The line-height fix is moved from ComposerWithSuggestions to Composer/index.tsx and Composer/index.native.tsx, so it's applied for both the main and edit composer on all platforms.

We can either complete my PR first or you can incorporate the changes to #40692.

[parasharrajat]

Thanks for the clarity. I think we might get more severe alignment issues from #40692 so It will be good to keep this PR open and apply changes that work for that PR too.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

@rlinoz, @Ollyws, @jliexpensify, @bernhardoj Whoops! This issue is 2 days overdue. Let's get this updated quick!

[rlinoz]

PR is in staging, just waiting a prod deploy.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.78-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix emoji’s are cut in half when in Edit message mode #42615

If no regressions arise, payment will be issued on 2024-06-11. 🎊

For reference, here are some details about the assignees on this issue:

• @Ollyws requires payment through NewDot Manual Requests
• @bernhardoj requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@Ollyws] The PR that introduced the bug has been identified. Link to the PR:
• [@Ollyws] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@Ollyws] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@Ollyws] Determine if we should create a regression test for this bug.
• [@Ollyws] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@jliexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[jliexpensify]

@Ollyws is a checklist needed here?

Payment Summary

• C: @bernhardoj $250
• C+: @Ollyws $250 (ND payment)

Upworks job

[Ollyws]

I don't think the checklist is but we should add a regression test:

1. Open any chat
2. Send an emoji only message
3. Long-press/right-click on the message and choose Edit message
4. Verify the emoji isn't cut in half

[Ollyws]

Requested on ND.

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @Ollyws owed $250 via NewDot
• ROLE: @bernhardoj paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@jliexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1794204477867704320/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[JmillsExpensify]

$250 approved for @Ollyws

[jliexpensify]

Paid @bernhardoj and job removed. Thanks everyone!