Auto-scroll pill should point down (e.g. `Approve ⌄`) when there's something to approve below the current scroll position

[melvin-bot]

Description

Update the auto-scroll bubble/pill at the top of the chat to point down (i.e., Approve ⌄) when there is something to approve beneath the current scroll position.

Context

Today the action pill points the user toward an action badge that is above the current scroll window (see #86064, which shows the pill with a ^ up-arrow). This issue is the complementary case: when the actionable item (e.g. a report that needs Approve/Pay/Fix) is below the current scroll position, the pill should point down (Approve ⌄) and, when clicked, scroll the user down to that item.

Expected Behavior

• When there is an action badge below the current scroll window, show the colored action pill (Approve/Pay/Fix/etc.) with a downward (⌄) arrow.
• Clicking it scrolls the user down to the row causing the action badge.
• Arrow direction reflects whether the target is above (^) or below (⌄) the current scroll position.

Related: #86064, #90278

Reported in Slack.

[aimane-chnaif]

@MelvinBot implement this

[MelvinBot]

🤖 Draft PR created: #98576

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

What I implemented

Extended the floating action-badge pill (from #86064, which only handled the target being above the scroll position with a ^ arrow) to the complementary "below" case:

• When the action-badge target is below the current scroll position, the pill now shows a down (⌄) arrow, and clicking it scrolls down to that row.
• The pill now appears whenever the target is out of view — above or below — with the arrow reflecting the direction.

Code changes

• useReportUnreadMessageScrollTracking.ts — now also tracks isActionBadgeBelowViewport (in the inverted list, target index < minIndex = below/newer, > maxIndex = above/older).
• useReportActionsScroll.ts — threads the new value through.
• ReportActionsList.tsx — shows the pill when the target is above or below, and passes the direction down.
• FloatingMessageCounter.tsx — renders DownArrow instead of UpArrow when the target is below.

The existing click handler already uses scrollToIndex(...), which scrolls in either direction (as called for in #90278), so no scroll-logic change was needed. Behavior stays gated to non-production, matching the existing rollout.

Verification

• Added/updated unit tests — all passing (FloatingMessageCounterTest, useReportUnreadMessageScrollTrackingTest, 25 + tracking cases green).
• typecheck (tsgo) ✅, ESLint on changed files ✅ (only pre-existing grandfathered warnings), React Compiler compliance ✅ (no regression / no new divergence — the one flagged file already failed identically on main).
• ⚠️ End-to-end web verification could not be completed this run: the pre-started browser session was stuck on a blank page (infra issue, not code). The human co-author should run the manual Tests steps in the PR before marking it Ready for review.