fix(VoIP): NewMediaCall sheet hugs content on Android

[diegolmello]

Proposed changes

Two layout fixes for the NewMediaCall action sheet on Android, which was rendering with ~250-300px of empty space below the green "Ligar" button.

Fix 1 — app/containers/ActionSheet/styles.ts: drop height: '100%' from the shared fullContainer style.

useActionSheetDetents has two detent paths: snap-driven and contentHeight-driven. When fullContainer: true propagated height: '100%' to the inner wrapping View, callers in the contentHeight path got a detent locked at the max fraction (0.75) because onLayout reported the View's forced 100% of TrueSheet's max area instead of actual content height. NewMediaCall is the only fullContainer: true caller that doesn't pass snaps, so it was the only one stuck. iOS bypasses the affected branch (fullContainer: false).

Fix 2 — app/containers/NewMediaCall/NewMediaCall.tsx: drop flex: 1 from the screen style.

After fix 1, the parent wrapper became flex: 0 with no fixed height. The inner screen View's flex: 1 then collapsed to padding-only (~84px on a 2400px-tall emulator), clipping the "New call" title and "Enter username or number" helper — only the search input, selected-peer pill, and Call button rendered. Dropping flex: 1 lets the screen size to its children's intrinsic heights so the full UI renders and the detent reflects actual content height.

The naive alternative — dropping fullContainer: isAndroid from the NewMediaCall caller — was tried earlier and breaks Android rendering: title and helper disappear because the detent collapses too small. The flag wasn't wrong; the underlying styles were.

Issue(s)

https://rocketchat.atlassian.net/browse/VMUX-103

How to test or reproduce

Android:

1. Open a DM and tap the phone icon in the room header.
2. NewMediaCall sheet hugs content: handle, "New call" title, search input, "Enter username or number" helper, selected-peer pill, green "Ligar" button — no large empty area below the button.
3. Tap the search input → keyboard up; sheet height holds.
4. Type a few characters → peer-list autocomplete renders.
5. Drag the handle down → sheet dismisses.

Audit of all 5 fullContainer: true callsites:

Callsite	Snaps	Visual after fix
useNewMediaCall.tsx	none	hugs content, title + input + helper + pill + Call all render ✓
useVideoConf/index.tsx	60% / 90%	not visually verified — snap-driven detent path; insulated by construction
RoomView/index.tsx (ReactionPicker)	50%	renders at 50%, no regression ✓
RoomView/index.tsx (ReactionsList)	50%	renders at 50%, no regression ✓
NewMessageView/Item.tsx	60% / 90%	not visually verified — snap-driven detent path; insulated by construction

iOS: unchanged (bypasses both paths via fullContainer: false for NewMediaCall).

Screenshots

Visual diff vs Figma reference: pass (visual-verdict score 93/100 on the post-fix state; remaining differences are theme/i18n/content variations).

Types of changes

• Bugfix (non-breaking change which fixes an issue)

Checklist

• Lint and unit tests pass locally (yarn lint clean; TZ=UTC yarn test --testPathPattern='NewMediaCall|ActionSheet|useActionSheetDetents' — 8 suites / 65 tests / 10 snapshots green)

Summary by CodeRabbit

• Style
  • Improved Action Sheet layout and sizing so it no longer forces full-height behavior.
  • Adjusted Main Media Call screen spacing to rely on padding for layout, improving rendering and consistent sizing.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c9a552f6-c854-41fd-b6cd-e0290c086af9

📥 Commits

Reviewing files that changed from the base of the PR and between ecd965f and 3199205.

📒 Files selected for processing (1)

• app/containers/NewMediaCall/NewMediaCall.tsx

💤 Files with no reviewable changes (1)

• app/containers/NewMediaCall/NewMediaCall.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: ESLint and Test / run-eslint-and-test

---

Walkthrough

Removed explicit flex/height layout properties from two component styles: ActionSheet's fullContainer no longer sets height: '100%', and NewMediaCall's top-level screen style no longer includes flex: 1.

Changes

Cohort / File(s)	Summary
ActionSheet Styling app/containers/ActionSheet/styles.ts	Removed height: '100%' from fullContainer style; layout now relies on width: '100%' and flex: 0.
NewMediaCall Screen app/containers/NewMediaCall/NewMediaCall.tsx	Removed flex: 1 from styles.screen on the top-level View, leaving padding and dynamic background/bottom padding intact.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

type: bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title mentions 'NewMediaCall sheet hugs content on Android' but the actual changes address two key aspects: removing height from fullContainer action-sheet style (the root cause fix) and removing flex: 1 from NewMediaCall screen (the caller-side fix). The title is partially related, focusing on the symptom/outcome rather than clearly capturing the main technical changes made.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}