[Due for payment 2025-05-20] Report - Pay button overlaps avatar

[jponikarchuk]

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: v9.1.33-3
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
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Device used: MacOS Big Sur
App Component: Chat Report View

Action Performed:

Precondition: Create expense in ws chat. Submit and approve it.

1. Go to report details
2. Resize app window to minimum

Expected Result:

Pay button do not overlap avatar.

Actual Result:

Pay button overlaps avatar.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[grgia]

Demoting as blocker, but should still be fixed by the author of offending PR

[luacmartins]

This view is behind a beta. @jnowakow @borys3kk could you please work on a fix?

[jnowakow]

I'll have a look at this one

[jnowakow]

It actually happens also on old version but since there's no "more" button it's less visible

It happens only when screen has width between 800 and 909 px.

I think that opinion from @Expensify/design would be valuable because maybe we should arrange header in a different way on a middle size screens?

[shawnborton]

Yeah, I think we should use a specific breakpoint for these medium width screens that actually forces the mobile style rendering of the report header bar. Can we take that approach here?

[grgia]

How's the breakpoint idea sound @jnowakow

[jnowakow]

We have breakpoints for tablets and for mobiles:

    mobileResponsiveWidthBreakpoint: 800,
    tabletResponsiveWidthBreakpoint: 1024,

So for screens between 800 and 1024 we should display report header this way?

[shawnborton]

So for screens between 800 and 1024 we should display report header this way?

That would be my vote, I think it's the cleanest approach. cc @Expensify/design for the gut check though!

[dannymcclain]

Definitely agree.

[dubielzyk-expensify]

Yeah that seems like a good solution to me too 👍

[luacmartins]

Agree, let's do it @jnowakow @borys3kk

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

• Fix pay button overlapping avatar #61568

If no regressions arise, payment will be issued on 2025-05-20. 🎊

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

• @borys3kk does not require payment (Contractor)
• @jnowakow does not require payment (Contractor)

[melvin-bot]

@luacmartins / @grgia @CortneyOfstad @borys3kk / @jnowakow 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]

[melvin-bot]

Skipping the payment summary for this issue since all the assignees are employees or vendors. If this is incorrect, please manually add the payment summary SO.

[CortneyOfstad]

All good so closing this out!