[Due for payment 2025-06-18] [$250] Bottom padding cuts letters off in Workflow approver area

[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: v9.1.54-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #62664
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Macbook Pro 2023 / Sequoia 15.2
App Component: Workspace Settings

Action Performed:

Precond: User has a workspace

1. Access staging.new.expensify.com or open the Desktop app
2. Login to a valid user
3. Tap on Workspace > Member > invite member accounts that contain letters like “Y”, “J”, “G”, etc.
4. Tap on Workspace > Workflow > Go to approver
5. select member in step 3

Expected Result:

User expects all text to display correctly

Actual Result:

These letters are slightly cut off at the bottom

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021929532731643910351
• Upwork Job ID: 1929532731643910351
• Last Price Increase: 2025-06-02
• Automatic offers:
• thelullabyy | Contributor | 107567613

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

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

[thelullabyy]

Proposal

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

These letters are slightly cut off at the bottom

What is the root cause of that problem?

The default description has textLabelSupporting with the fontSize: 13

App/src/components/MenuItem.tsx

Line 529 in 733010e

styles.textLabelSupporting,

And we add the line height normal style (16px) if the title exists.

App/src/components/MenuItem.tsx

Line 532 in 733010e

title ? styles.textLineHeightNormal : StyleUtils.getLineHeightStyle(variables.fontSizeNormalHeight),

The problem is that the approver text has textNormalThemeText with fontSize: 15, then it's cut off because the line height is not enough

App/src/components/ApprovalWorkflowSection.tsx

Line 92 in 733010e

descriptionTextStyle={styles.textNormalThemeText}

The same problem with the expense from description here

App/src/components/ApprovalWorkflowSection.tsx

Line 73 in 733010e

descriptionTextStyle={styles.textNormalThemeText}

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

We should pass the line height style that matches the fontSize of the approver text here. I tested 18px is enough, but we can confirm with the design team to choose the best result

descriptionTextStyle={[styles.textNormalThemeText, styles.lineHeightLarge]} // or we can use lineHeightXLarge

App/src/components/ApprovalWorkflowSection.tsx

Line 92 in 733010e

descriptionTextStyle={styles.textNormalThemeText}

App/src/components/ApprovalWorkflowSection.tsx

Line 73 in 733010e

descriptionTextStyle={styles.textNormalThemeText}

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)

We can add a flag to only apply textLineHeightNormal when it's necessary, otherwise the fallback line height will be StyleUtils.getLineHeightStyle(variables.fontSizeNormalHeight) (20px)

App/src/components/MenuItem.tsx

Line 532 in 733010e

title ? styles.textLineHeightNormal : StyleUtils.getLineHeightStyle(variables.fontSizeNormalHeight),

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.

[melvin-bot]

@muttmuure Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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

[muttmuure]

Awaiting C+ review