chore: fixes small styling bug in the buy menu

[georgeweiler]

Description

This PR fixes inconsistent vertical padding in the Add Funds modal (FundActionMenu) that appears when users tap "Add funds" from the Wallet screen. The modal was showing tight spacing at the top (~8-10px) and smaller bottom padding, creating a visually unbalanced and compressed appearance.

Improvements:

• Added consistent 16px top padding above the first list item (Deposit)
• Added consistent 16px bottom padding below the last list item (Withdraw)
• Aligned padding with MetaMask modal design standards used throughout the app
• Improved visual consistency and polish for a core wallet funding flow

Technical Changes:

• Wrapped ActionListItem components in a Box component with pt-4 pb-4 Tailwind classes
• This provides 16px padding on both top and bottom edges, matching the standard used in other modals like PerpsModifyActionSheet

Changelog

CHANGELOG entry: Fixed inconsistent vertical padding in Add Funds modal to improve visual consistency

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TRAM-2673

https://consensyssoftware.atlassian.net/browse/TRAM-2898

Manual testing steps

Feature: Add Funds Modal Padding

Scenario: user opens Add Funds modal and verifies consistent padding
Given the user is on the Wallet screen
When user taps the "Add funds" button
Then the modal should display with 16px padding above the first item (Deposit)
And the modal should display with 16px padding below the last item (Withdraw)
And the top and bottom padding should be visually balanced
And the modal should not appear compressed or cut off

Scenario: user verifies padding consistency across different action configurations
Given the user opens the Add Funds modal
When the modal displays with different combinations of visible actions (Deposit, Buy, Sell)
Then the padding should remain consistent regardless of which actions are visible
And the spacing should match other modals in the app (e.g., token picker, settings sheets)## Screenshots/Recordings

Before

• Top padding above "Deposit" was ~8-10px (too tight)
• Bottom padding below "Withdraw" was smaller than top padding
• Modal appeared visually compressed and unbalanced

After

• Top padding above first item is now 16px (consistent with design standards)
• Bottom padding below last item is now 16px (matches top padding)
• Modal has balanced, consistent spacing that matches other modals in the app

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 (all existing tests pass - 31/31)
• 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.

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

Adds consistent top/bottom padding in FundActionMenu by wrapping action items with a Box (py-4).

• UI
  • app/components/UI/FundActionMenu/FundActionMenu.tsx:
    • Wraps action items with Box using twClassName="py-4" to add consistent top/bottom padding in the bottom sheet.
    • Updates import to include Box from @metamask/design-system-react-native.

^{Written by Cursor Bugbot for commit 2ea9708. This will update automatically on new commits. 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.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeRamps
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

The change to FundActionMenu.tsx is a purely cosmetic/styling modification. The diff shows:

1. Added import for Box component from '@metamask/design-system-react-native'
2. Wrapped the existing action items list with a <Box twClassName="py-4"> container for padding

This is a minimal UI styling change (adding padding via tailwind classes) that doesn't modify:

• Any business logic
• Analytics tracking
• Navigation behavior
• Button functionality
• Component state management

The FundActionMenu component is used in the Ramps (buy/sell) flow, as evidenced by:

• E2E tests in e2e/specs/ramps/ that use this component
• Tests tagged with SmokeRamps (like offramp-token-amount.spec.ts)
• Tests tagged with RegressionTrade (like ramps-account-switch.spec.ts, onramp-parameters.spec.ts)

Since this is a low-risk styling change that only affects the visual layout of the Fund Action Menu (adding vertical padding), running the SmokeRamps tag is sufficient to verify that:

1. The menu still renders correctly
2. Buy/Sell buttons remain clickable and functional
3. The ramps flow continues to work as expected

No other tags are impacted as this component is specifically part of the ramps/fund action flow and doesn't affect other wallet functionality.

View GitHub Actions results

[sonarqubecloud]

Quality Gate failed

Failed conditions
D Maintainability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE