[Due for payment 2026-09-24] [Design polish] Shorten page header on mobile

@dannymcclain

On mobile, we have many pages that use multiple fixed elements - the top bar, bottom footer button, etc. As a result, we have less vertical space that can actually show scrollable content.

Let's try to slightly mitigate that by making the page headers on mobile slightly shorter. This will also make the mobile app feel a bit more in line with mobile apps where a more condensed header bar is the norm.

cc @dannymcclain @dubielzyk-expensify @JmillsExpensify

Tracking issue: #100792

Issue Owner

Current Issue Owner: @mallenexpensify

@huult

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

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

@MelvinBot

@MelvinBot can you implement this please?

I’ll take a look at this ticket soon.

🤖 Draft PR created: #100805

The page header bar now renders at 64px on mobile-width screens and stays at 72px everywhere else — including the RHP, which is a narrow pane on desktop but isn't "mobile", so the new useContentHeaderHeight hook keys off isSmallScreenWidth rather than shouldUseNarrowLayout.

Covered: HeaderWithBackButton (both the current and the composed version), the chat/report header, TopBar, the report header skeleton, and the layout math that subtracts the header height (keyboard offsets on New chat / New room / Per diem destination, and the exit-survey form height) so nothing ends up 8px out of sync on mobile.

⚠️ Not visually verified. npm run typecheck, npm run lint-changed, the React Compiler compliance check, and the related Jest suites all pass, but the browser test session was dead this run (blank page, no active session), so I could not measure the rendered heights or take screenshots. Someone should confirm the 64px on a real mobile viewport before this moves out of draft.

Please mark the PR as "Ready for review" when it is ready.

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

We’re handling the payment in #100813, so we can close this ticket after 7 days.

@huult

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

Not overdue

@mallenexpensify

Triggered auto assignment to @mallenexpensify (Awaiting Payment)

@huult

Payment Summary

Resolving PRs:

Shorten the page header bar to 64px on mobile #100805
Reviewer: @huult owed $175 via NewDot

BugZero Checklist (@mallenexpensify)

I have confirmed assignees, roles, and Upwork contracts look correct
I have paid out Upwork contracts / manual NewDot requests
[BugZero Assignee] I have created a GH issue for creating/updating the regression test once above steps have been agreed upon

No payment is needed for this ticket

Navigation Menu

[Due for payment 2026-09-24] [Design polish] Shorten page header on mobile #100799

7 remaining items

Payment Summary

BugZero Checklist (@mallenexpensify)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Due for payment 2026-09-24] [Design polish] Shorten page header on mobile #100799

Description

Activity

melvin-bot commented on Sep 10, 2026

melvin-bot commented on Sep 10, 2026

shawnborton commented on Sep 10, 2026

huult commented on Sep 10, 2026

MelvinBot commented on Sep 10, 2026

melvin-bot commented on Sep 14, 2026

7 remaining items

huult commented on Sep 18, 2026

melvin-bot commented on Sep 21, 2026

huult commented on Sep 23, 2026

melvin-bot commented on Sep 23, 2026

melvin-bot commented on Sep 23, 2026

Payment Summary

BugZero Checklist (@mallenexpensify)

huult commented on Sep 23, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions