Description

The Deposit AccountSelector component does not properly truncate long account names, causing text to overflow horizontally and get cut off at screen edges. This differs from the Aggregator AccountSelector which correctly truncates with middle ellipsis.

Root Cause

The Deposit AccountSelector was missing flexShrink: 1 on both the container and text elements. Without this property:

• numberOfLines={1} and ellipsizeMode="middle" cannot work because the text width is unconstrained
• The parent container grows indefinitely, causing overflow instead of truncation

Solution

Added flexShrink: 1 to match the Aggregator AccountSelector pattern:

1. Added flexShrink: 1 to the selector style
2. Created new accountText style with flexShrink: 1
3. Applied accountText style to the Text component

Changelog

CHANGELOG entry: Fixed long account names overflowing in the Deposit Buy screen by enabling proper text truncation

Related issues

Refs: N/A (discovered during UI review)

Manual testing steps

Feature: Deposit AccountSelector long name truncation

  Scenario: User sees truncated account name with middle ellipsis
    Given the user has an account with a very long name (e.g., "Account 4 - This is a very long account name for testing purposes")
    And the user navigates to the Deposit/Buy flow

    When user views the BuildQuote screen
    Then the account name should be truncated with ellipsis in the middle (e.g., "Account 4 - T...ting purposes")
    And the account selector pill should not overflow the screen
    And the region selector should remain visible on the right side

Screenshots/Recordings

Before

After

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.

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.