[Due for payment 2025-11-26] [$175] - Chat - Site header overlaps error messages & typing indicator in Safari on iOS 26

[vincdargento]

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.2.36-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: TC-3623
Email or phone of affected tester (no customers): applausetester+omqq1@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max/iOS 26.0.1/Safari
App Component: Chat Report View

Action Performed:

Precondition: user signed in with account A on main testing device and account B on secondary

1. Open staging.new.expensify.com
2. Navigate to chat with account B
3. Tap on the composer to open the virtual keyboard
4. Start typing on the secondary device where account B is logged in
5. Look at the typing indicator text below the composer.
6. Paste the following text into the composer to trigger the error message:

[] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean ma (creating task message with more than 100 characters)

Expected Result:

The typing indicator and error messages should be fully visible and not overlapped by the site header when the composer is focused and virtual keyboard is open

Actual Result:

The site header partially overlaps the typing indicator and composer error messages when the composer is focused and virtual keyboard is open

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

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021981525234790599018
• Upwork Job ID: 1981525234790599018
• Last Price Increase: 2025-10-24
• Automatic offers:
• situchan | Reviewer | 109263351

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

[daledah]

Proposal

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

The site header partially overlaps the typing indicator and composer error messages when the composer is focused and virtual keyboard is open

What is the root cause of that problem?

improvement Safari on IOS 26 only

The site header partially overlaps the typing indicator and composer error messages when the composer is focused and virtual keyboard is open

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

We can add marginBottom to screenWrapperStyle to prevent URL bar overlap

    // Add marginBottom for Safari iOS 26 to prevent URL bar overlap
    const screenWrapperStyle: ViewStyle[] = [
        styles.appContent, 
        styles.flex1, 
        {marginTop: viewportOffsetTop},
        {marginBottom: isMobileSafari() ? 20 : 0}
    ];

Or reduce the marginTop

    // Reduce marginTop for Safari iOS 26 to prevent URL bar overlap
    const adjustedViewportOffset = isMobileSafari() ? Math.max(0, viewportOffsetTop - 20) : viewportOffsetTop;
    const screenWrapperStyle: ViewStyle[] = [styles.appContent, styles.flex1, {marginTop: adjustedViewportOffset}];

App/src/pages/home/ReportScreen.tsx

Line 304 in 4313a95

const screenWrapperStyle: ViewStyle[] = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];

App/src/pages/home/ReportScreen.tsx

Lines 862 to 864 in 4313a95

	<ScreenWrapper
	navigation={navigation}
	style={screenWrapperStyle}

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

None

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.

[VictoriaExpensify]

Oh yeah, that's pretty ugly - it would be good to clean this up. I don't know that this is a super complex fix, though, so I'm going to drop the bounty a bit. Let me know if I am misunderstanding something in relation to the complexity of this

[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/~021981525234790599018

[melvin-bot]

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