[HOLD for payment 2024-03-25] [HOLD for payment 2024-03-22] Web - Chat - When hovering over a message, reply, edit and menu icons are displayed smaller

[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.52-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4423073
Email or phone of affected tester (no customers): vdargentotest+web031324@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

Pre-requisite: the user must be logged in

1. Go to any chat
2. Send a message
3. Hover over the message for the action menu to appear

Expected Result:

The "Reply in thread", "Edit comment" and "Menu" icons should be bigger, the same size as the rest

Actual Result:

The "Reply in thread", "Edit comment" and "Menu" icons are smaller than the rest

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

View all open jobs on GitHub

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

[melvin-bot]

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

[lanitochka17]

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

[lanitochka17]

@marcaaron 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

[hussnainhamid1]

Proposal

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

Web - Chat - When hovering over a message, reply, edit and menu icons are displayed smaller

What is the root cause of that problem?

Size of the iconWidth and iconHeight are not being set properly, which is causing overall size of the icons look smaller.

App/src/components/Icon/index.tsx

Line 70 in 13f8bc0

const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);

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

We can set the size of the icons to appear normal by using variables.iconSizeNormal. So here is how the change will look like:

    const iconWidth = small ? variables.iconSizeSmall : width
    const iconHeight = small ? variables.iconSizeSmall : height

And we can further remove the line of code specified in the problem cause section:

    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);

What alternative solutions did you explore? (Optional)

N/A

[ikevin127]

Proposal

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

When hovering over a message, the context menu items: Reply in thread, Edit comment and Menu icons are smaller than the rest of the icons.

What is the root cause of that problem?

Offending PR: #37966, specifically the Icon/index.tsx changes from here.

Since here we're setting the ContextMenuItem icons to small size, and the PR introduced the following changes:

Diff

-    const iconWidth = small ? variables.iconSizeSmall : width;
-    const iconHeight = small ? variables.iconSizeSmall : height;
+    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);

StyleUtils.getIconWidthAndHeightStyle() returns variables.iconSizeExtraSmall as width / height for the small size now instead of variables.iconSizeSmall as the old Icon/index.tsx code used to do (see diff above).

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

In order to keep the PR's medium / large icon size implementation, we can check if small is true and return variables.iconSizeSmall, otherwise use the values returned by StyleUtils.getIconWidthAndHeightStyle(), like so:

const {width: iconW, height: iconH} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);
const iconWidth = small ? variables.iconSizeSmall : iconW;
const iconHeight = small ? variables.iconSizeSmall : iconH;

What alternative solutions did you explore? (Optional)

Alternatively, we can simply revert the Icon/index.tsx changes implemented by offending PR (see diff above in RCA).

[marcaaron]

cc @luacmartins

[narefyev91]

will take this one