[HOLD for payment 2024-11-07] [$250] Web/Safari - Workspace - Upgrade message in the #admins room moves slightly when hovered

[IuliiaHerets]

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: 9.0.52-5
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with a new Gmail account
3. Create a workspace
4. Navigate to Workspace settings - More features
5. Enable "Report fields" and upgrade the WS to Control when asked
6. Navigate to the #admins room
7. Hover over the upgrade message
8. Navigate to the Concierge chat
9. Hover over the "Welcome to Expensify" message

Expected Result:

Message shouldn't move.

Actual Result:

Upgrade message in the #admins room moves slightly when hovered. It also affects Concierge "Welcome to Expensify" message.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6642907_1729667005484.Screen_Recording_2024-10-22_At_23.56.55.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021849066967845098466
• Upwork Job ID: 1849066967845098466
• Last Price Increase: 2024-10-23

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[IuliiaHerets]

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

[IuliiaHerets]

We think that this bug might be related to #wave-control

[bernhardoj]

Proposal

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

The message is moving when hovered only in Safari.

What is the root cause of that problem?

The issue is coming from the transform style here.

App/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts

Lines 22 to 23 in 4f0ca94

	// In Safari, when welcome messages use a code block (triple backticks), they would overlap the context menu below when there is no scrollbar without the transform style.
	transform: 'translateZ(0)',

It was added in this issue to fix the mini context menu is overlapped by the room welcome message whisper.

However, the issue doesn't happen anymore after we apply the correct z-index for each message correctly in this issue.

App/src/components/InvertedFlatList/CellRendererComponent.tsx

Lines 17 to 24 in 4f0ca94

	/**
	* To achieve absolute positioning and handle overflows for list items,
	* it is necessary to assign zIndex values. In the case of inverted lists,
	* the lower list items will have higher zIndex values compared to the upper
	* list items. Consequently, lower list items can overflow the upper list items.
	* See: https://github.com/Expensify/App/issues/20451
	*/
	{zIndex: -props.index, position: 'relative'},

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

Remove the unneeded transform style here.

App/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts

Lines 22 to 23 in 4f0ca94

	// In Safari, when welcome messages use a code block (triple backticks), they would overlap the context menu below when there is no scrollbar without the transform style.
	transform: 'translateZ(0)',

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[thesahindia]

@bernhardoj's proposal looks fine to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[rlinoz]

Nice, let's make sure to test all possible markdown syntax we support

[bernhardoj]

PR is ready

cc: @thesahindia

[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 9.0.55-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix message is moving when hovered in Safari #51378

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

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

• @bernhardoj requires payment through NewDot Manual Requests
• @thesahindia requires payment through NewDot Manual Requests

[melvin-bot]

@thesahindia @bfitzexpensify The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]