Android - Expense - No padding between report header and action buttons

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.81-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #100805
Email or phone of affected tester (no customers): jsdoijnodsdisojo@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Money Requests

Action Performed:

1. Launch Expensify app.
2. Go to workspace chat.
3. Create an expense.
4. Open the report.

Expected Result:

There will be padding between report header and action buttons (similar to iOS app).

Actual Result:

There is no padding between report header and action buttons.
Report header avatar touches the Submit button.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome Safari

Screenshots/Videos

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7262218

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/4770164fe776e192ef569c75195f70d97c45eb24cb9883cb91228325b09ac372

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #100805

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

@MonilBhavsar @grgia @huult you have been assigned to this deploy blocker because you reviewed the offending PR: #100805

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[huult]

Can someone add a screenshot to this ticket?

[MelvinBot]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: Shorten the page header bar to 64px on mobile (Expensify/App#100805) - "Shorten the page header bar to 64px on mobile" by @MelvinBot (High confidence)
Related Issues: None found

Recommendation: ROLL FORWARD

Applause flagged the right PR: #100805 is the only PR in 9.4.81-0 that changes the mobile header bar height (72px → 64px), and nothing else in this release touches MoneyReportHeader. A revert would undo a deliberate cross-cutting design change (22 files, a new shared useContentHeaderHeight hook, all headers on all platforms) to fix a few pixels of spacing on one screen, so the safer fix is to add the vertical spacing the stacked action row never had of its own.

Suggested fix: give the stacked (narrow-layout) action row its own top padding instead of relying on the header bar's leftover height, e.g. add styles.pt2 alongside styles.pb3 in the narrow branch of MoneyReportHeaderActions. That is a one-line change and is platform-agnostic, so it also protects the layout against future header-height tweaks.

Assigned: @MonilBhavsar, @grgia, @huult (approving reviewers of #100805 — already auto-assigned). The PR author is @MelvinBot, so there is no human author to add.
Labels: No changes. DeployBlockerCash stays (App-side regression, App deploy is blocked). DeployBlocker was not present and was not added.

📋 Detailed Analysis

Evidence

• Reproducible on staging, not production, and Shorten the page header bar to 64px on mobile #100805 merged on 2026-09-16 into the 9.4.81-0 staging build.
• I diffed production...staging and listed the files of every PR on the deploy checklist. The only header-height changes in the whole release come from Shorten the page header bar to 64px on mobile #100805:
  • src/styles/variables.ts adds contentHeaderNarrowHeight: getValueUsingPixelRatio(64, 100).
  • src/styles/index.ts removes the intrinsic height: variables.contentHeaderHeight from headerBar, appContentHeader and LHNToggle, and adds a new headerBarNarrowHeight.
  • The height is then re-applied per call site via the new useContentHeaderHeight() hook, which returns the 64px style whenever shouldUseNarrowLayout is true — i.e. on every phone.
• Other candidates I checked and ruled out:
  • [NoQA] [Insights] Move the Account button to the top bar — touches HeaderWithBackButton/index.tsx, styles/index.ts and variables.ts, but only adds the account avatar button and its styles; no height or padding changes.
  • ReportActionAvatars - report-type wrappers - ExpenseReportAvatar — touches AvatarWithDisplayName.tsx and SubscriptAvatar.tsx, but the diff is a subscriptAvatarBorderColor → backdropColor rename plus wrapper extraction; no size or layout change.
  • Refactor search key to a query param and User list item decomposition — unrelated to header layout.
  • MoneyReportHeader.tsx and MoneyReportHeaderActions/index.tsx are not in the production...staging diff at all, so the action-button layout itself did not change this release. The only variable that moved is the header bar height.

Verification

Permalinks are pinned to the staging commit 29fce2d4649bf6f17ccb72940f3a2e5782078a07 (version 9.4.81-0).

Affected code path for "workspace chat → create expense → open report" on a phone:

1. MoneyRequestReportView.tsx#L190-L201 renders MoneyReportHeader.
2. MoneyReportHeader.tsx#L119-L150 — on narrow layouts shouldShowHeaderButtonsInHeaderRow is false, so MoneyReportHeaderActions is rendered below HeaderWithBackButton, inside a wrapper styled only [styles.pt0, styles.borderBottom].
3. MoneyReportHeaderActions/index.tsx#L83 — the narrow action row is [styles.flexRow, styles.gap2, styles.pb3, styles.ph5, styles.w100, ...]: padding bottom only, no padding top. The gap above the Submit button has always come entirely from the header bar's spare height.
4. HeaderWithBackButton/index.tsx#L207-L218 — contentHeaderHeightStyle (added by Shorten the page header bar to 64px on mobile #100805) now sets that height.
5. useContentHeaderHeight.ts#L26 → styles.headerBarNarrowHeight → variables.ts#L37 = 64px (was 72px).

Confirmation that #100805 modifies exactly these files: src/styles/variables.ts, src/styles/index.ts, src/hooks/useContentHeaderHeight.ts (new) and src/components/HeaderWithBackButton/index.tsx are all in its file list.

Root Cause

headerBar is a fixed-height, overflow: 'hidden', justifyContent: 'center' container (styles/index.ts#L2887-L2892). #100805 removed its intrinsic height there and re-applied it through useContentHeaderHeight, which yields 64px instead of 72px on phones.

The report header's avatar is a subscript avatar whose secondary icon is absolutely positioned at bottom: -6, so it renders 6px below the 40px primary avatar box. With a 72px bar the centered avatar left (72 − 40) / 2 − 6 = 10px of visible clearance below the subscript; with a 64px bar that becomes (64 − 40) / 2 − 6 = 6px. Because the stacked action row adds no top padding, those few pixels are the entire separation between the avatar and the Submit button, and they shrank by 40%.

Why Android looks worse than iOS: the bar height is fixed and clips (overflow: 'hidden'), while the inner row is sized by its tallest child. Android Text includes extra font padding by default (the app does not set includeFontPadding: false anywhere in src/styles), so the two-line title + subtitle column in AvatarWithDisplayName is measurably taller on Android than on iOS. At 72px both platforms had slack; at 64px the Android content fills or overflows the bar, the 6px subscript overhang gets clipped to the bar edge, and the avatar ends up flush against the Submit button. I could not run a device repro here, so treat the platform asymmetry as the most probable mechanism rather than a measured fact — but the regression itself is unambiguously from the 72px → 64px change, since that is the only relevant thing that moved this release.

💡 Suggested AI code review rule

This bug looks like a recurring, mechanically detectable pattern, so it may be worth a coding-standards rule so the AI reviewer catches the next one. Proposed for Expensify/App:

• Rule: UI-4 Audit every consumer before removing a layout property from a shared style
• Condition: When a PR deletes a layout property (height, width, padding*, margin*, gap) from a named style in src/styles/index.ts and re-applies it at individual call sites, flag it unless every consumer of that style has been updated — including consumers that depend on the property indirectly for spacing, not for their own size.
• Why: Shared styles in src/styles/index.ts are the implicit spacing contract for anything rendered next to them. headerBar lost its intrinsic height, the replacement style was applied only at the call sites the PR knew about, and a sibling that relied on the bar's leftover height for separation (the stacked report action buttons, which have pb3 but no pt) collapsed — see this issue.
• Search pattern: in the diff of src/styles/index.ts, removed lines matching ^-\s+(height|width|padding|margin|gap)[A-Za-z]*: inside a style object; then for each affected style name run grep -rn "styles\.<styleName>\b" src/ and check every hit, plus grep -rn "<styleName>" src/ for StyleUtils indirection.
• Offending code (❌): src/styles/index.ts#L2887-L2892 (headerBar after the height removal) and src/components/MoneyReportHeaderActions/index.tsx#L83 (the sibling that silently lost its spacing)
• Fix (✅): the stacked action row owns its own top padding instead of borrowing the header's slack (see the suggested fix above)

The full rule file, with the ❌/✅ code inline in Expensify/App's coding-standards format (.claude/skills/app-coding-standards/rules/ui-4-*.md plus a UI bullet in SKILL.md), would go in Expensify/App itself. If it's worth adding, a maintainer can open it there as a draft PR.