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 [email protected] 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): [email protected]
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

[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

[mollfpr]

Thanks for the proposal, @mkzie2. Could you point the PR causing the regression?

[mitarachim]

@mollfpr this issue is related to the PR

[mananjadhav]

We're aware of some issues with the Markdown title rendering. @Krishna2323 and I will fix it as a part of the original PR. It's not a deploy blocker.

@mollfpr @trjExpensify We can take care of this.

[mollfpr]

Thank @mananjadhav for confirming it! I'll assign you guys to the issue and I agree is not a blocker.

[mollfpr]

@trjExpensify Could you assign @Krishna2323 here? I couldn't find them in the assignee columns 😅

[mananjadhav]

I think they'll have to comment to assign.

[Krishna2323]

@mollfpr 👋

[trjExpensify]

@trjExpensify Could you assign @Krishna2323 here? I couldn't find them in the assignee columns 😅

Done!