[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 contributors@expensify.com 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): applausetester+khcategory19@applause.expensifail.com
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.