Compose box - When expanded all of the compose box moves to the top

[applause-bot]

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.3.89-1
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-35251/folder/13176681/41236978/1447302158?sort=%2Bidentifier
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows 11/Chrome, Android 13
App Component: Chat Report View

Action Performed:

1. Sign in to staging.new.expensify.com
2. Navigate to a conversation
3. Enter a multiline text until the expand button is displayed in the compose box
4. Click on the expand button

Expected Result:

The whole of the compose box expands

Actual Result:

The whole of the compose box moves to the top rather than expanding for Web and the send button is pushed below the edges of the screen for Android

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7165912_1780014889597.bandicam_2026-05-29_03-30-19-470.mp4

View all open jobs on GitHub

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

[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/57626d02bd591ed7b70134e6795dd80447e2d8a5e7285b654be0dc49812e8c51

[melvin-bot]

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

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

[MelvinBot]

Proposal

What is the root cause of that problem?

This issue is the same root cause as the earlier non-blocking bug #91927 (composer cut off at the bottom when expanded). Both surface a layout regression that ships with v9.3.89, likely introduced by #90915 (refactor: Split ReportActionCompose into more compositional components, merged 2026-05-26).

When isComposerFullSize is true, ReportFooter.tsx:92-105 applies chatFooterFullCompose (height:'100%', paddingTop:20) to the chat-footer wrapper. The wrapper's parent at ReportScreen.tsx:142-156 is a flex:1, justifyContent:'flex-end', overflow:'hidden' column that already contains ReportActionsList as a sibling above it. Forcing height:100% on the footer inside that column makes it occupy the full column height instead of behaving as a flex child, which produces both symptoms:

• Web: the footer fills the column, so justifyContent:'flex-end' has nothing to push — the visible composer block is rendered starting at the top of the available space.
• Android: the inner chatItemFullComposeBox and chatItemFullComposeRow also use height:100% / flex:1, so the cascade overflows the keyboard-adjusted viewport and the send button gets pushed below the visible edge.

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

Stop forcing height:'100%' on the expanded chat footer and let the flex column do the vertical sizing it was already set up to do.

Minimal, low-risk change: in src/styles/index.ts:2247-2250 change chatFooterFullCompose from height:'100%' to flex:1 (keep paddingTop:20). The parent at ReportScreen.tsx:146 is already flex:1, justifyContent:'flex-end', overflow:'hidden', so a flex child fills the remaining space correctly and respects the keyboard-avoiding wrapper on native.

The same style is also reused by the admins-only edit branch at ReportFooter.tsx:165-190 — one style change covers both call sites.

A full revert of #90915 is not recommended: it created ~30 new files under src/pages/inbox/report/ReportActionCompose/ and rewired many downstream call sites (edit message, drop zone, suggestions, ComposerContext). The style-only fix is much smaller and unblocks deploy without losing the refactor.

What alternative solutions did you explore? (Optional)

• Revert [NoQA] refactor: Split ReportActionCompose into more compositional components to allow for separate EditOnlyReportActionCompose #90915 — touches 40+ files and many call sites; too large for a deploy-blocker turnaround.
• Targeted fix in ReportFooter.tsx:97 — swap chatFooterFullCompose for an inline [styles.flex1, {paddingTop:20}] only when isComposerFullSize. Equivalent behavior, but spreads the change across both branches in ReportFooter instead of fixing it once in the style object.

Related issue and supporting code references

• Likely duplicate / same regression: [$250] Chat - Composer field is cut off at the bottom when expanded #91927 (filed 2026-05-28, already has multiple proposals attributing the regression to [NoQA] refactor: Split ReportActionCompose into more compositional components to allow for separate EditOnlyReportActionCompose #90915).
• Compose-box wrappers that participate in the cascade:
  • ComposerBox.tsx:18-24 — adds chatItemFullComposeBox when expanded.
  • ComposerContainer.tsx:21 — applies chatItemFullComposeRow.
  • ComposerInputArea.tsx:21-29 — nests chatItemFullComposeRow + flex1.
• These do not need to change for the fix above to work, but they explain why the broken cascade overflows past the keyboard on Android.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/92038#issuecomment-PROPOSAL_ID) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.