[HOLD for payment 2023-08-08] [$1000] Dev: Web - Message is not center aligned vertically

[kbecciv]

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

---

Action Performed:

1. Open any chat and focus on composer
2. Send any message
3. Hover message and observe hovered background

Expected Result:

Message is center aligned vertically

Actual Result:

Message is not center aligned vertically

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: Dev 1.3.43-4
Reproducible in staging?: n/a
Reproducible in production?: n/a
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @situchan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689880642291459

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e8cf36b803aa7592
• Upwork Job ID: 1683865114924675072
• Last Price Increase: 2023-07-25

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[samh-nl]

Proposal

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

The message is not center aligned vertically.

What is the root cause of that problem?

A gap is added after a message that causes this misalignment. This container is used for rendering reactions, which are not present.

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

We should only render the View container inside the reactions component (or alternatively, the component itself) if there are reactions present.

What alternative solutions did you explore? (Optional)

N/A

[alitoshmatov]

Proposal

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

Web - Message is not center aligned vertically

What is the root cause of that problem?

We are still rendering component which is responsible for showing emoji reactions and it has some padding applied to it

App/src/components/Reactions/ReportActionItemEmojiReactions.js

Line 73 in a9e26e5

style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}

And it is resulting in empty element being rendered, and it is taking some space:

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

We should add condition and render ReportActionItemEmojiReactions only if report action has any reaction:

App/src/pages/home/report/ReportActionItem.js

Line 361 in 8dcad16

<ReportActionItemEmojiReactions

We can add condition like this: _.isEmpty(props.emojiReactions)

What alternative solutions did you explore? (Optional)

[Nodebrute]

Proposal

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

Dev: Web - Message is not center aligned vertically

What is the root cause of that problem?

This component is getting rendered even when props.emojiReactions is empty

App/src/pages/home/report/ReportActionItem.js

Line 361 in 041d640

<ReportActionItemEmojiReactions

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

We can conditionally render this when props.emojiReactions is not empty

       {!_.isEmpty(props.emojiReactions) && <View style={draftMessageRightAlign}>
                    <ReportActionItemEmojiReactions
                        reportActionID={props.action.reportActionID}
                        emojiReactions={props.emojiReactions}
                        toggleReaction={(emoji) => {
                            if (Session.isAnonymousUser()) {
                                hideContextMenu(false);

                                InteractionManager.runAfterInteractions(() => {
                                    Session.signOutAndRedirectToSignIn();
                                });
                            } else {
                                toggleReaction(emoji);
                            }
                        }}
                    />
                </View>}

What alternative solutions did you explore? (Optional)

[Pujan92]

Proposal

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

Chat Message is not aligned center vertically

What is the root cause of that problem?

As ReportActionItemEmojiReactions we are rendering without having the reactions also causing the issue of top margin of 8px.

App/src/pages/home/report/ReportActionItem.js

Line 361 in 041d640

<ReportActionItemEmojiReactions

App/src/components/Reactions/ReportActionItemEmojiReactions.js

Lines 71 to 73 in 041d640

	<View
	ref={popoverReactionListAnchor}
	style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}

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

Only render the View for ReportActionItemEmojiReactions when we have the reactions for the message.

{!_.isEmpty(props.emojiReactions) && <View style={draftMessageRightAlign}>

App/src/pages/home/report/ReportActionItem.js

Line 360 in 041d640

<View style={draftMessageRightAlign}>

[situchan]

Proposal from slack (@kbecciv missed pasting)

Proposal

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

Chat message is not center aligned vertically

What is the root cause of that problem?

Issue happens on this line:

App/src/components/Reactions/ReportActionItemEmojiReactions.js

Line 73 in bc7f689

style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}

So even if no reactions to show, 8px is always added

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

Early return null if totalReactionCount = 0
For this, we should run _map code first to calculate totalReactionCount earlier than return null

[anmurali]

I am OOO for 10 days. Rotating the assigner.