[Due for payment 2025-04-25] [Report Creation UI] The "New Messages" badge is displayed out of screen borders

[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.27-0
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: #59735
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Samsung S23FE/ Android 14
App Component: Chat Report View

Action Performed:

Precondition: Have a workspace with Delay submissions set in Manually.

Steps:

1. Open the Expensify app
2. Log in with an Expensifail account
3. Create a new report with the "Create report" option in the FAB button
4. Add an expense (with a category assigned) to the report by using the "Add expense" option in the button next to the composer

Expected Result:

The "New Messages" badge should not be displayed because there are no new messages.

Actual Result:

The "New Messages" badge is displayed out of screen borders and is not actionable.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6798995_1744338449968.New_messages_badge.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

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

[mollfpr]

I can repro the issue on staging, working on bisect.

[thelullabyy]

Proposal

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

• The "New Messages" badge is currently rendered outside the visible screen area, making it inaccessible and non-interactive.

What is the root cause of that problem?

• The badge is absolutely positioned using position: absolute, but it's rendered within a layout where its position is incorrectly calculated.
• Specifically, the badge is rendered here:
  

  App/src/pages/home/report/ReportActionsList.tsx

  Lines 733 to 736 in 6569205

  	<FloatingMessageCounter
  	isActive={isFloatingMessageCounterVisible}
  	onClick={scrollToBottomAndMarkReportAsRead}
  	/>

• As a result, this component is treated as the reference point for positioning:
  

  App/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

  Line 163 in 6569205

  <View style={styles.flex1}>

• This causes the badge to appear at the top of the screen, and even adjusting its top value to -40 does not resolve the visibility issue—it remains off-screen and unusable.

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

• Move the badge rendering code from:
  

  App/src/pages/home/report/ReportActionsList.tsx

  Lines 733 to 736 in 6569205

  	<FloatingMessageCounter
  	isActive={isFloatingMessageCounterVisible}
  	onClick={scrollToBottomAndMarkReportAsRead}
  	/>

  
  to a position lower in the component hierarchy, specifically:
  

  App/src/pages/home/report/ReportActionsList.tsx

  Line 742 in 6569205

  >

• And add overflow: 'hidden' to:
  

  App/src/pages/home/report/ReportActionsList.tsx

  Line 738 in 6569205

  style={[styles.flex1, !shouldShowReportRecipientLocalTime && !hideComposer ? styles.pb4 : {}]}

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

• N/A

What alternative solutions did you explore? (Optional)

Option 1:

• Update this component:
  

  App/src/pages/home/report/ReportActionsList.tsx

  Line 732 in 6569205

  <>

        <View style={[{flex: 1, overflow: 'hidden'}]}>

Option 2:

• Move the badge rendering code from:
  

  App/src/pages/home/report/ReportActionsList.tsx

  Lines 733 to 736 in 6569205

  	<FloatingMessageCounter
  	isActive={isFloatingMessageCounterVisible}
  	onClick={scrollToBottomAndMarkReportAsRead}
  	/>

  
  to a position lower in the component hierarchy, specifically:
  

  App/src/pages/home/report/ReportActionsList.tsx

  Line 742 in 6569205

  >

• Update the header container style at:
  

  App/src/components/MoneyReportHeader.tsx

  Line 503 in 6569205

  <View style={[styles.pt0, styles.borderBottom]}>

  to ensure the badge appears behind the header as intended. Suggested style modification:

        <View style={[styles.pt0, styles.borderBottom, { zIndex: 101}, styles.appBG]}>

[mollfpr]

@SzymczakJ @allgandalf It seems regression from #59735

[mountiny]

Adding this to the migrate project and @SzymczakJ will check this out ❤ thanks!

[SzymczakJ]

I noticed that the whole "New messages" pill callback doesn't work(it doesn't scroll to new messages) on SearchMoneyRequestReportPage, I'm going to fix it along with this bug.

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

• fix the "New Messages" badge is displayed out of screen borders #60194

If no regressions arise, payment will be issued on 2025-04-25. 🎊

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

• @SzymczakJ does not require payment (Contractor)
• @DylanDylann requires payment through NewDot Manual Requests

[melvin-bot]

@DylanDylann @johncschuster @DylanDylann 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]

[johncschuster]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment:

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

Test:

Do we agree 👍 or 👎

[DylanDylann]

This bug is minor, I think the regression test is unnecessary

[trjExpensify]

Yeah agreed, and payment will be handled centrally for the project. Should we close this?

[johncschuster]

Thanks for chiming in, @trjExpensify! Closing!