[Due for payment 2025-04-14] Web - Task - Block quote line is invisible when hovering over Title field in task report

[mitarachim]

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.1.11-1
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp #54165
Email or phone of affected tester (no customers): applausetester+ps309@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Go to any chat.
3. Click + > Assign task.
4. Click Title.
5. Enter text with blockquote and save it.
6. Create the task.
7. Hover over the task preview in the main chat.
8. Note that the block quote line is visible when hovered.
9. Click on the task preview.
10. Hover over Title field in the task report.

Expected Result:

Block quote line will be visible when hovering over Title field in task report

Actual Result:

Block quote line is invisible when hovering over Title field in task report.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6766868_1741658166913.20250311_095135.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Triggered auto assignment to @trjExpensify (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 @mollfpr (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

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

[mkzie2]

Proposal

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

Block quote line is invisible when hovering over Title field in task report.

What is the root cause of that problem?

The blockquote line has the same color with the menu item's background color when hovering theme.border.

App/src/styles/index.ts

Lines 178 to 179 in 26e12ba

	blockquote: {
	borderLeftColor: theme.border,

App/src/styles/utils/index.ts

Lines 1398 to 1399 in 42161e4

	case CONST.BUTTON_STATES.ACTIVE:
	return isMenuItem ? {backgroundColor: theme.border} : {backgroundColor: theme.buttonHoveredBG};

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

Either change the blockquote line color or the menu item's hover background color.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA - Minor UI update

What alternative solutions did you explore? (Optional)

None