[Due for payment 2025-03-28] [$125] Android - Help panel - Section header is split into two lines on narrow display

[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.9-1
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
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: Samsung Galaxy Z Fold 4 / Android 14
App Component: Workspace Settings

Action Performed:

Precondition:

• Help panel feature is enabled by switching language to Spanish and back to English.
• Device display must be narrow (Samsung Galaxy Z Fold 4), or switch to Samsung Galaxy Z Fold 5 on developer mode.

1. Launch ND or hybrid app.
2. Go to Setting.
3. Open Preferences/Workspaces/Subscription.

Expected Result:

Section header will not be split into two lines when there is a help icon.

Actual Result:

Section header is split into two lines when there is a help icon.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6761671_1741168808362.1741168481604_Screen_Recording_20250305_175417_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021898752846702684195
• Upwork Job ID: 1898752846702684195
• Last Price Increase: 2025-03-09

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @nkuoch (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @mallenexpensify (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]

💬 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.

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

Looks to be front end, made External at $125, removed @nkuoch as it's not a deploy blocker anymore.

[atsuya046]

Proposal

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

The title text sometimes wraps into multiple lines depending on the device's screen width. Specifically, on narrow displays such as Galaxy Z Fold 4, the presence of icons or buttons in the header causes the title to unintentionally break into two lines.

What is the root cause of that problem?

1. The Text component did not have numberOfLines={1} set, allowing the title to wrap into multiple lines.
2. adjustsFontSizeToFit was not applied, preventing long titles from dynamically adjusting their font size to fit within a single line.

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

By modifying the Text component in Header.tsx, we ensure that the title always fits within a single line and dynamically adjusts its font size if needed.

<Text
    adjustsFontSizeToFit
    numberOfLines={1}
    style={[styles.headerText, styles.textLarge, textStyles]}
>
    {title}
</Text>

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

Add HeaderTest.tsx to verify that long titles fit within a single line
Example: "This is a very long header title that should fit in one line"

What alternative solutions did you explore? (Optional)

Considered creating a new component, such as HeaderWithAutoSize.tsx, separate from Header.tsx, where adjustsFontSizeToFit and numberOfLines={1} are applied.

• Advantages of this approach:
  • Limits the impact of this change to only the affected pages.
• Disadvantages:
  • Other pages using Header.tsx may experience the same issue in the future.
  • Maintaining multiple header components increases complexity and reduces maintainability.

If there are pages that should display the title in two lines, this alternative approach should be adopted.

[melvin-bot]

📣 @atsuya046! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

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

• Help button spacing and alignment #58474

If no regressions arise, payment will be issued on 2025-03-28. 🎊

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

• @blazejkustra does not require payment (Contractor)

[melvin-bot]

@francoisl @mallenexpensify @blazejkustra 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]

[brunovjk]

I can't reproduce this anymore after implementing this PR. Tested on 27 Mar v9.1.20-2 Develop. We can close, payment and BZ checklist will be handled here. Thanks!

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

[melvin-bot]

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

[mallenexpensify]

@brunovjk are you due compensation here? It looks like you reviewed the linked PR. Please comment if so
@joekaufmanexpensify , if Bruno isn't, can you please close this issue? Thx I'm going to be OOO and offline for two weeks so I'm reassigning, will pick back up upon my return, thx

[brunovjk]

@brunovjk are you due compensation here? It looks like you reviewed #58474. Please comment if so

This PR is already included in the Pull Requests for minor issues that we discussed earlier. We can close it, and payment will be made here. Thank you very much.

[joekaufmanexpensify]

Sounds good. Closing then!