The arrow in the Title push row on the task details page does not match the style and placement of the arrows in the other push rows.

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.66-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dannymcclain
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Create a task and assign it to a user.
2. Navigate to the task details page.
3. Observe the arrows for the Title, Description, and Assignee push rows.
4. Compare the arrow style and placement across the three rows.

Expected Result:

The Title, Description, and Assignee push rows should use consistent arrow styling and placement.

Actual Result:

The arrow in the Title push row has a different style and/or placement compared with the Description and Assignee push rows.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @linhvovan29546

[MelvinBot]

Proposal

What is the root cause of that problem?

The Description and Assignee rows get their arrow from MenuItem's standard right-icon block. The Title row hand-rolls its own arrow instead, and that hand-rolled copy drifted from the standard one in three measurable ways.

Reproduced on web (dev NewDot). Zoomed crop of the three chevrons stacked — Title on top:

	Title row (hand-rolled)	Description / Assignee (MenuItem)
Container width	40px	20px → Title arrow sits 10px further from the right edge
Vertical placement	top-anchored, plus marginTop: 4	justifyContent: 'center' over the whole label+value block
Resting appearance	full-opacity, colour swaps on hover	theme.icon at 50% opacity, only opacity changes on hover → Title arrow looks darker/bolder

The icon asset (ArrowRight) and the glyph size (20×20) are the same in both, so size is not the problem — the wrapper is.

Evidence

The hand-rolled arrow: src/components/ReportActionItem/TaskView.tsx:189-199, wrapped in styles.taskRightIconContainer — width: componentSizeNormal (40), alignItems: 'center' but no justifyContent, plus spacing.mt1. This style is used in exactly one place, this row.

The standard arrow: src/components/MenuItem/MenuItem.tsx:1204-1234, wrapped in getMenuItemIconStyle(true) → {justifyContent: 'center', alignItems: 'center', width: 20}, dimmed with styles.opacitySemiTransparent whenever not hovered, and filled with theme.icon (never theme.iconHovered, because shouldDimIconRight defaults to true).

Measured on the running app, matching the predicted values:

• Title chevron centre x=1560 vs 1570 for the other two — the predicted 10px gutter from the 40px-wide box.
• Title chevron min grayscale ≈165 vs ≈208 for the other two — the predicted missing 50% opacity.
• Title chevron is centred on its title text only, while the other two are centred over their full label+value block.

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

Make the Title arrow use the same wrapper values MenuItem uses:

1. In taskRightIconContainer, change the width from componentSizeNormal (40) to iconSizeNormal (20), add justifyContent: 'center', and drop spacing.mt1. That alone fixes the 10px horizontal offset.
2. In TaskView, dim the arrow at rest the way MenuItem does — apply styles.opacitySemiTransparent when not hovered and set the fill to theme.icon instead of calling getIconFillColor(getButtonState(...)). That fixes the "darker/bolder" mismatch and makes hover behave identically (opacity change, not colour change).
3. For vertical parity, the arrow container needs to span the Title label and the title line, not just the title line. Today the arrow is a sibling of the checkbox+title row, which sits below the label, so justifyContent: 'center' centres it on the title text only. Move the arrow up one level so it wraps the whole label+title block, matching how MenuItem centres over its label+value block.

Since taskRightIconContainer has exactly one consumer, steps 1 and 2 carry no blast radius outside this row.

What alternative solutions did you explore? (Optional)

Replacing the hand-rolled Title row with a MenuItem would guarantee parity for free, but the row also hosts the completion Checkbox, RenderHTML title, and split accessibility targets, so it is a much larger change than this cosmetic bug warrants.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/100193) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

---

view run · no recording available

[melvin-bot]

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

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[linhvovan29546]

@MelvinBot implement this

[linhvovan29546]

@MelvinBot's proposal LGTM!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[MelvinBot]

🤖 Draft PR created: #100245

Please mark it as "Ready for review" when it is ready for review.

What changed — the Title arrow now uses the same wrapper and dimming as the standard MenuItem chevron on the Description and Assignee rows:

1. src/styles/index.ts:4687 — taskRightIconContainer width componentSizeNormal (40) → iconSizeNormal (20), added justifyContentCenter, swapped alignItemsCenter → alignItemsEnd, dropped spacing.mt1. This removes the 10px horizontal offset and matches menuItemChevron exactly.
2. src/components/ReportActionItem/TaskView.tsx:233 — the arrow is now dimmed with styles.opacitySemiTransparent at rest and filled with theme.icon, instead of StyleUtils.getIconFillColor(getButtonState(...)). Resting weight and hover behaviour now match the other rows.
3. The arrow container moved up one level so it wraps the Title label and the title line, so justifyContent: 'center' centres it over the full label+value block the way MenuItem does.

taskRightIconContainer has exactly one consumer, so steps 1 and 2 have no blast radius outside this row.

⚠️ Needs a human visual check before this leaves draft. Local static checks all pass, but the browser verification did not run — the prestarted web test session lost its authentication mid-run and could not be re-authenticated from the agent, so the three chevrons were never measured on a running build. The change is CSS-only parity with the standard chevron, but nobody has looked at it rendered.

AI tests run locally

Check	Result
npm run lint-changed	✅ pass
npm run typecheck	✅ pass
npm run react-compiler-compliance-check check src/components/ReportActionItem/TaskView.tsx	✅ pass
npm run spell-changed	✅ pass
npm test -- tests/unit/TaskViewTranslateTest.tsx tests/actions/TaskTest.ts tests/unit/libs/TaskutilsTest.ts	✅ 81 passed

---

view run

[MelvinBot]

⚠️ Claude's API is currently overloaded (HTTP 529). This is a temporary issue on Anthropic's side. Try again in a few minutes, or check status.anthropic.com.

Run details

[melvin-bot]

@youssef-lr Huh... This is 4 days overdue. Who can take care of this?