fix(confirmations): prevent Perps withdraw clipping on Android cp-7.75.0

[dan437]

Description

Fixes an Android layout issue where the Perps Withdraw confirmation keypad bottom row and the final Withdraw button could be clipped behind the system navigation area.

The fix keeps the shared full-screen confirmation layout intact, ensures the confirmation ScrollView fills its safe-area container, and applies extra Android bottom spacing only to the Perps Withdraw bottom block.

Changelog

CHANGELOG entry: Fixed Perps Withdraw on Android so the keypad and Withdraw button remain fully visible.

Related issues

Fixes: #29363

Manual testing steps

Feature: Perps Withdraw Android layout

  Scenario: Perps Withdraw keypad is fully visible on Android
    Given I am on the Perps Withdraw confirmation
    When the amount keyboard is visible
    Then the bottom keypad row is fully visible above the Android navigation bar

  Scenario: Perps Withdraw button is fully visible on Android
    Given I am on the Perps Withdraw confirmation
    When I enter an amount and continue past the keyboard
    Then the Withdraw button is fully visible with bottom spacing

  Scenario: Other deposit flows are not regressed
    Given I open Perps Deposit and Predict Deposit confirmations
    Then their keyboards remain fully visible and keep expected bottom spacing

Screenshots/Recordings

Before

Android Perps Withdraw keypad / Withdraw button clipped behind the system navigation area.

After

Android Perps Withdraw keypad and Withdraw button fully visible. Verified on Pixel 6 and Pixel 10 Pro XL.

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Low Risk
Small, opt-in styling change scoped to Perps Withdraw (and Android-only) with added unit tests; minimal risk beyond potential minor layout spacing differences on affected screens.

Overview
Prevents Perps Withdraw confirmation UI from clipping behind the Android gesture/navigation bar by adding an opt-in hasExtraBottomPadding prop to CustomAmountInfo and applying a 56dp paddingBottom to the bottom block only on Android.

PerpsWithdrawInfo now enables this padding, and new test IDs plus unit tests cover the platform-conditional styling and prop behavior to avoid iOS/layout regressions.

^{Reviewed by Cursor Bugbot for commit dd5c508. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 6f900f2. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes in this PR are focused and minimal:

1. custom-amount-info.testIds.ts (new): Adds a BOTTOM_BLOCK test ID to the bottom container of CustomAmountInfo.
2. custom-amount-info.styles.ts: Adds an extraBottomPadding style (56px bottom padding on Android only, 0 on iOS).
3. custom-amount-info.tsx: Adds optional hasExtraBottomPadding prop; applies the new style and test ID to the bottom Box when the prop is true. All other behavior is unchanged.
4. perps-withdraw-info.tsx: Passes hasExtraBottomPadding to CustomAmountInfo — the sole consumer of this new prop.

This is a targeted Android layout fix for the Perps Withdraw screen, preventing the UI from clipping behind the system gesture bar. The change is backward-compatible (optional prop, no logic changes).

SmokePerps: Directly validates the Perps Withdraw flow where the fix is applied.
SmokeWalletPlatform: Required per tag description — Perps is a section inside the Trending tab, so Perps view changes affect this tag.
SmokeConfirmations: Required per SmokePerps tag description — Add Funds/Withdraw flows involve on-chain transactions that go through the confirmations system. Also, CustomAmountInfo is part of the confirmations component tree.

No other flows are affected since hasExtraBottomPadding is a new optional prop with no impact on existing callers.

Performance Test Selection:
The change adds a conditional bottom padding style (56px on Android, 0 on iOS) to the Perps Withdraw screen. This is a trivial layout-only change with no impact on rendering performance, data loading, state management, or any other performance-sensitive area. No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
12 value mismatches detected (expected — fixture represents an existing user).
View details