Skip to content

fix(ramps): prevent country name overflow in v2 native address form#26740

Merged
AxelGes merged 2 commits into
mainfrom
fix/country-field-overflow-v2-ramps
Mar 2, 2026
Merged

fix(ramps): prevent country name overflow in v2 native address form#26740
AxelGes merged 2 commits into
mainfrom
fix/country-field-overflow-v2-ramps

Conversation

@AxelGes

@AxelGes AxelGes commented Mar 2, 2026

Copy link
Copy Markdown
Contributor

Description

Long country names like "United States of America" were wrapping to multiple lines inside the half-width country field on the Enter Address screen, causing a visual overflow as seen in the screenshot.

The fix adds `numberOfLines={1}` to the country `DepositTextField`, which constrains the text to a single line and lets it clip/scroll horizontally instead of wrapping.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TRAM-2885?atlOrigin=eyJpIjoiODEyMTFjOWM1MmY0NGMxNzlkZjBhOTZhMmJjYjY4ODgiLCJwIjoiaiJ9

Manual testing steps

Feature: Country field display in v2 Ramps address form

  Scenario: user on Enter Address screen with a US account
    Given the user is on the Enter Address screen in the v2 Ramps native flow
    And the selected region is United States

    Then the country field shows "United States of America" on a single line
    And the text does not overflow or wrap to a second line

Screenshots/Recordings

Before

"United States of America" wrapped to two lines inside the narrow country field.

After

Text stays on one line, clipping at the field boundary.
image

Pre-merge author checklist

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
Low risk UI-only change: constrains the disabled country DepositTextField to a single line to avoid layout overflow; no business logic or data handling changes.

Overview
Prevents long country names from wrapping/overflowing in the v2 ramps native EnterAddress screen by setting numberOfLines={1} on the disabled country DepositTextField, keeping the half-width field visually stable.

Written by Cursor Bugbot for commit 10866b1. This will update automatically on new commits. Configure here.

Long country names like "United States of America" were wrapping to
multiple lines in the half-width country field. Add numberOfLines={1}
so the text stays on a single line and clips horizontally instead.
@AxelGes AxelGes self-assigned this Mar 2, 2026
@github-actions

github-actions Bot commented Mar 2, 2026

Copy link
Copy Markdown
Contributor

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.

@metamaskbot metamaskbot added the team-money-movement issues related to Money Movement features label Mar 2, 2026
@AxelGes AxelGes marked this pull request as ready for review March 2, 2026 17:35
@AxelGes AxelGes requested a review from a team as a code owner March 2, 2026 17:35
@AxelGes AxelGes enabled auto-merge March 2, 2026 17:35
@github-actions

github-actions Bot commented Mar 2, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeRamps
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 95%
click to see 🤖 AI reasoning details

E2E Test Selection:
The change is a single-line addition of numberOfLines={1} prop to a DepositTextField component in the Ramp EnterAddress screen. This is a purely cosmetic UI fix to prevent the country name from wrapping to multiple lines. The change is isolated to the Ramp (buy/sell crypto) flow's address entry form and doesn't affect any functionality, state management, or other components. SmokeRamps is the appropriate tag as it covers fiat on-ramp (buy crypto) and off-ramp (sell crypto) features, including the address entry screens used in these flows.

Performance Test Selection:
This change adds a simple numberOfLines={1} prop to a text field component, which is a minor UI display fix. It does not affect rendering performance, data loading, state management, or any critical user flows. No performance tests are needed for this cosmetic change.

View GitHub Actions results

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread app/components/UI/Ramp/Views/NativeFlow/EnterAddress.tsx
@github-actions

github-actions Bot commented Mar 2, 2026

Copy link
Copy Markdown
Contributor

⚠️ E2E Fixture Validation — Structural changes detected

Category Count
New keys 60
Missing keys 0
Type mismatches 0
Value mismatches 6 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report

@AxelGes AxelGes added this pull request to the merge queue Mar 2, 2026
Merged via the queue into main with commit 4052d8c Mar 2, 2026
94 checks passed
@AxelGes AxelGes deleted the fix/country-field-overflow-v2-ramps branch March 2, 2026 18:28
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 2, 2026
@metamaskbot metamaskbot added the release-7.69.0 Issue or pull request that will be included in release 7.69.0 label Mar 2, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.69.0 Issue or pull request that will be included in release 7.69.0 size-XS team-money-movement issues related to Money Movement features

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants