[Due for payment 2025-05-20] Per diem - Huge space between table header and content when there are a few per diem rates

[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.43-7
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail: #60488
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Samsung Galaxy Z Fold 4 / Android 14
App Component: Workspace Settings

Action Performed:

Precondition:

• Workspace has imported a few per diem rates (5 per diem rates) (as long as per diem page is not scrollable).

1. Go to staging.new.expensify.com
2. Go to workspace settings.
3. Go to Per diem.

Expected Result:

There will be no space between table header and content when there are a few per diem rates.

Actual Result:

There is huge space between table header and content when there are a few per diem rates.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6827140_1746861397026!5_per_diem_rates (1).csv

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @maddylewis

[melvin-bot]

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

[Eskalifer1]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-10 10:20:10 UTC.

Proposal

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

Per diem - Huge space between table header and content when there are a few per diem rates

What is the root cause of that problem?

Compared to new.expensify.com, the page structure has changed, so now the elements are located in slightly different places, which is why the flex:1 style works differently than it did before

Layout now:

Layout before:

The root of the problem is that the header element has the flex1 property, as a result of which the element (if the number of elements is less than the number that can fit on the page) stretches or shrinks

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

remove here style with flex1:

App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

Line 233 in 81b1b49

<View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, canSelectMultiple && styles.pl3, !canSelectMultiple && [styles.ph9, styles.pv3, styles.pb5]]}>

Here is how the element looks when it is shrinks:

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

None, UI bug

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Burhan-Rashid]

Proposal

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

Per diem - Huge space between table header and content when there are a few per diem rates

What is the root cause of that problem?

In this file:

App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

Lines 413 to 416 in 81b1b49

	<ScrollView
	showsVerticalScrollIndicator={false}
	contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}
	>

we have moved the <SelectionListWithModal /> inside <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]} /> with contentContainerStyle as flexGrow1 in the PR: #61765 which is causing the issue.

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

Just Remove the styles.flexGrow1 here:

App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

Lines 413 to 416 in 81b1b49

	<ScrollView
	showsVerticalScrollIndicator={false}
	contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}
	>

I have tested it and it is working perfectly fine for long list as well as if the list has only few items.

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)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[thesahindia]

@daledah, could you please look into it?

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[luacmartins]

Seems like it'll be fixed by #61844

[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:

• [CP Staging] fix: search bar performance followup #61844

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

[melvin-bot]

@luacmartins @maddylewis @luacmartins 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.

[maddylewis]

@luacmartins - does this require any action from me? do we need to add a new regression test or anything?

[luacmartins]

No action. This was a regression fixed by this PR. We can close this issue.