fix: prevent price diff text wrapping from shifting chart on iOS accessibility scaling

[vinnyhoward]

Description

Fixed issue where iOS accessibility font scaling caused the price diff text to wrap, pushing the trend chart down and causing it to jump up and down when scanning the chart.

Solution:

• Wrapped text in a flex container with flexWrap: 'nowrap' to constrain layout
• Added numberOfLines={1}, adjustsFontSizeToFit, and minimumFontScale={0.5} to
  prevent text wrapping while maintaining readability by auto-scaling font size

Changelog

CHANGELOG entry: Fixed chart jumping issues when font accessibility is turned on

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-596

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

~

Before

before.mov

After

after.mov

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.

---

Note

Prevents price diff text from wrapping and shifting the chart by wrapping it in a non-wrapping row container and enabling single-line autoscaling.

• Asset Overview Price UI:
  • Wrap price diff and date in priceDiffContainer (flexDirection: 'row', flexWrap: 'nowrap', overflow: 'hidden').
  • Add flexShrink: 1 to priceDiff and keep icon styling.
  • Set numberOfLines={1}, adjustsFontSizeToFit, minimumFontScale={0.5} on the price diff Text; nest date Text inside.
• Tests:
  • Update snapshots to reflect new container and text props.

^{Written by Cursor Bugbot for commit 936949f. 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: SmokeAssets
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

The changes are purely cosmetic UI modifications to the Price component in AssetOverview. The modifications involve:

1. Adding a container view with flexbox styling to prevent text overflow
2. Adding text wrapping properties (numberOfLines, adjustsFontSizeToFit, minimumFontScale) for responsive display
3. Corresponding style changes to support the new layout

No functional logic was changed - no calculations, state management, or data handling was modified. The snapshots were updated to reflect the new UI structure.

The Price component is part of AssetOverview which displays token/asset price information. This directly maps to the SmokeAssets tag which covers "Asset management and display, NFTs, token details". Running SmokeAssets will verify that asset detail pages render correctly with the new price display formatting.

This is a low-risk change because:

• It's purely styling/layout changes
• No business logic is affected
• The changes are isolated to a single display component
• Unit test snapshots were properly updated

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud