Skip to content

fix: text alignment in asset picker#27069

Merged
ghgoodreau merged 2 commits into
mainfrom
SWAPS-4154-text-alignment-asset-picker
Mar 6, 2026
Merged

fix: text alignment in asset picker#27069
ghgoodreau merged 2 commits into
mainfrom
SWAPS-4154-text-alignment-asset-picker

Conversation

@ghgoodreau

@ghgoodreau ghgoodreau commented Mar 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR aligns the mobile asset picker token row layout and text-wrapping behavior with metamask-extension to fix wrapping/spacing issues in TokenSelectorItem.

It updates the row structure so balances are consistently prioritized on the right, enforces single-line rendering for crypto and fiat balances, and truncates long token names to a single line with tail ellipsis. Tests were updated to reflect the new truncation behavior and to verify single-line balance rendering.

Changelog

CHANGELOG entry: Fixed a bug in the asset picker where token and balance text could wrap incorrectly by aligning mobile layout and truncation behavior with extension.

Related issues

Fixes: SWAPS-4154

Manual testing steps

Feature: Asset picker text layout parity with extension

  Scenario: user views token row with long token name
    Given the user is on the Swap/Bridge asset picker
    And at least one token has a long name and non-zero balances
    When the token list is rendered
    Then the token name is truncated to 1 line with tail ellipsis
    And the crypto balance is displayed on a single line on the right
    And the fiat balance is displayed on a single line on the right
    And there is no excessive empty space between token info and balances

  Scenario: user views token row while balances are loading
    Given the user is on the Swap/Bridge asset picker
    And token balances are in loading state
    When the token list is rendered
    Then loading placeholders render without wrapping text to a second line
    And row alignment remains consistent

Screenshots/Recordings

Before

After

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
UI-only layout tweaks to TokenSelectorItem (flex/shrink, single-line truncation, right-aligned balances) with updated tests; low risk aside from potential visual regressions on edge-case token names/balances.

Overview
Updates TokenSelectorItem layout to follow a left-details/right-values pattern: token symbol/name are constrained to a single truncated line while crypto/fiat balances render as single-line, right-aligned values.

Adds flex/shrink and minWidth: 0 styling to prevent overflow, updates fiat balance rendering to numberOfLines={1}, and adjusts/extends tests to assert the new truncation and single-line balance behavior.

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

@github-actions

github-actions Bot commented Mar 5, 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-swaps-and-bridge Swaps and Bridge team label Mar 5, 2026
@github-actions github-actions Bot added the size-M label Mar 5, 2026
@ghgoodreau ghgoodreau marked this pull request as ready for review March 5, 2026 17:19
@ghgoodreau ghgoodreau requested a review from a team as a code owner March 5, 2026 17:19
@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

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

E2E Test Selection:
The changes are to TokenSelectorItem.tsx, a UI component used in the BridgeTokenSelector for selecting tokens during bridge/swap operations. The modifications are purely visual/layout changes:

  1. Restructured layout to place token symbol/name on the left and balances on the right (following extension layout pattern)
  2. Changed text truncation from 2 lines to 1 line for token names
  3. Added numberOfLines={1} to balance displays for consistent single-line rendering
  4. Added new styles (tokenMainInfo, rightValue, tokenName) and modified existing styles for proper flex behavior

The component is imported by BridgeTokenSelector.tsx which is part of the bridge/swap token selection flow. Since this affects the token selection UI in bridge and swap flows, SmokeTrade is the appropriate tag. Per the tag guidance, SmokeConfirmations should also be selected when SmokeTrade is selected since swap/bridge flows require confirmations.

These are low-risk UI styling changes that don't modify business logic, state management, or transaction handling - just the visual presentation of token items in the selector list.

Performance Test Selection:
The changes are purely visual/layout modifications to a UI component (TokenSelectorItem). The changes involve CSS styling adjustments (flexShrink, minWidth, text truncation) and layout restructuring. These do not affect data loading, state management, list rendering performance, or any critical performance paths. The component is a simple list item renderer and the changes don't introduce new computations, API calls, or rendering complexity that would warrant performance testing.

View GitHub Actions results

@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

⚠️ E2E Fixture Validation — Structural changes detected

Category Count
New keys 68
Missing keys 11
Type mismatches 0
Value mismatches 7 (informational)

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

@metamaskbot update-mobile-fixture

View full details | Download diff report

@sonarqubecloud

sonarqubecloud Bot commented Mar 5, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
4 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

@ghgoodreau ghgoodreau added this pull request to the merge queue Mar 6, 2026
Merged via the queue into main with commit f039709 Mar 6, 2026
159 of 162 checks passed
@ghgoodreau ghgoodreau deleted the SWAPS-4154-text-alignment-asset-picker branch March 6, 2026 17:14
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 6, 2026
@metamaskbot metamaskbot added the release-7.70.0 Issue or pull request that will be included in release 7.70.0 label Mar 6, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@micaelae micaelae micaelae approved these changes

@infiniteflower infiniteflower infiniteflower approved these changes

Assignees

No one assigned

Labels

release-7.70.0 Issue or pull request that will be included in release 7.70.0 size-M team-swaps-and-bridge Swaps and Bridge team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@ghgoodreau @micaelae @infiniteflower @metamaskbot