[$125] Chat - Emoji is top-aligned instead of centered in the composer

[izarutskaya]

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

---

Version Number: 1.4.63-0
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to chat.
3. Enter only emoji in the composer.

Expected Result:

The emoji will be centered in the composer.

Actual Result:

The emoji is top-aligned in the composer.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0167e42daeaa6d9467
• Upwork Job ID: 1781349395352080384
• Last Price Increase: 2024-04-19
• Automatic offers:
• akinwale | Reviewer | 0
• MahmudjonToraqulov | Contributor | 0

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

Triggered auto assignment to @twisterdotcom (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.

[melvin-bot]

Triggered auto assignment to @mountiny (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

@twisterdotcom 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.

[izarutskaya]

We think this issue might be related to the #collect project.

[izarutskaya]

Production

[MahmudjonToraqulov]

Proposal

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

Chat - Emoji is top-aligned instead of centered in the composer

What is the root cause of that problem?

Offended PR: #39597
The size of Emojis has been made larger so we should add line-height.

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

We should add "lineHeight: emojiFontSize" here:

App/src/hooks/useMarkdownStyle.ts

Line 24 in 3ec8f2f

fontSize: emojiFontSize,

What alternative solutions did you explore? (Optional)

N/A

Result

After Fixed

[twisterdotcom]

@mountiny three things:

1. I'm going to remove the deploy blocker, this is not a blocker.
2. I'm going to demote to Daily and assign Design.
3. Can we assign @MahmudjonToraqulov?

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[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.

[shawnborton]

Let me know how I can be helpful. Do we have a link to the PR that caused this regression?

[MahmudjonToraqulov]

Let me know how I can be helpful. Do we have a link to the PR that caused this regression?

Hey. I included it in my Proposal.

[shawnborton]

Got it. If @Skalakid's PR broke this, why aren't we asking them to create a follow up to fix it?

[mountiny]

I agree this does not have to be a blocker.

I think we can go with @MahmudjonToraqulov solution but it would be great to properly test it.

[MahmudjonToraqulov]

How is this going @MahmudjonToraqulov?

Hey. I think the regression is not related to my PR. I meant this issue
I'll make PR soon.

[MahmudjonToraqulov]

PR is ready for review.

[melvin-bot]

This issue has not been updated in over 15 days. @shawnborton, @akinwale, @twisterdotcom, @mountiny, @MahmudjonToraqulov eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[BartoszGrajdek]

Hi, I’m Bartosz from SWM react-native-live-markdown team. We’ve recently decided that it would be best to actively participate in all of the issues that could be related to the library we’re working on. That means reviewing proposals together with the Expensify team and supporting external contributors to ensure quality solutions that won’t introduce any additional regressions. 🙌🏻

I’m currently going through all of the issues that could require any changes to the library. Feel free to tag me if you need anything, later I’ll be diving into the issues more in-depth, but there’s quite a few of them so it can take a while for me to catch up. Oh and feel free to tag me in any live-markdown related issues in the future! 😄

[BartoszGrajdek]

I believe this could be fixed by a feature we'll be implementing in the coming days, let me come back here later today/tomorrow 👀

[BartoszGrajdek]

As you can see the PR was merged! We're currently working on a PR with version bump of react-native-live-markdown here in E/App, can we test if this problem was fixed there? #44262

[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]

@shawnborton, @akinwale, @twisterdotcom, @mountiny, @MahmudjonToraqulov, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[mountiny]

This seems to have been fixed with the react live markdown update.

I think we should pay $125 to @MahmudjonToraqulov @akinwale still though as they spent considerable time on fixing and testing this across platforms before we put it on hold for react live markdown

[twisterdotcom]

Payment Summary:

• @MahmudjonToraqulov paid $125 via Upwork here (Contributor)
• @akinwale paid $125 via Upwork here (C+)