[$250] Per diem - "Subrate" title size is small when no subrate is selected

[IuliiaHerets]

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.4-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Workspace has per diem rates.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Per diems.
3. Click Category.
4. Note that "Category" title size is 15px when no category is selected.
5. Go to FAB > Create expense > Per diem.
6. Select destination and select date > Next.

Expected Result:

"Subrate" title size should be 15px when no subrate is selected.

Actual Result:

"Subrate" title size is 13px when no subrate is selected.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6751141_1740257385365.20250223_044533.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021894344353482755144
• Upwork Job ID: 1894344353482755144
• Last Price Increase: 2025-02-25

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

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

[bernhardoj]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-23 16:30:48 UTC.

Proposal

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

The sub-rate title is too small when no value is selected.

What is the root cause of that problem?

When the value isn't selected, we conditionally apply a small style to the label text.

App/src/components/ValuePicker/index.tsx

Line 31 in 0b6d1a0

const descStyle = !value || value.length === 0 ? StyleUtils.getFontSizeStyle(variables.fontSizeLabel) : null;

This happens to every ValuePicker.

The logic was first introduced in #29923 because it's too big when a value is selected, but MenuItem now already handles it, so that the font size is small when a value is selected, and normal when it's not selected.

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

Remove the additional descStyle.

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

N/A

[Themoonalsofall]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-23 16:31:28 UTC.

Proposal

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

Per diem - "Subrate" title size is small when no subrate is selected

What is the root cause of that problem?

We setting with font size fontSizeLabel

App/src/components/ValuePicker/index.tsx

Line 31 in 0b6d1a0

const descStyle = !value || value.length === 0 ? StyleUtils.getFontSizeStyle(variables.fontSizeLabel) : null;

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

Change this to use fontSizeNormal

    const descStyle = !value || value.length === 0 ? StyleUtils.getFontSizeStyle(variables.fontSizeNormal) : null;

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

NA

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.

[laurenreidexpensify]

@Expensify/design can you confirm this is accurate and worth fixing? Thanks

[shawnborton]

Yeah, that's definitely a bug and we should fix it. I have no idea how or why that happens though with our push row component - we should try to fix this in a way where we make sure that any time a push row doesn't have a value, the label gets the correct size treatment.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021894344353482755144

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @hungvu193 (External)

[hungvu193]

@bernhardoj 's proposal here has the correct RCA and is straightforward. We don't need descStyle anymore, cause the default fontSize of the menu item description is already 15px.
🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @NikkiWines, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[NikkiWines]

Agreed, @bernhardoj's proposal looks good 👍