chore(runway): cherry-pick fix(perps): fix truncated market names and Pro fees layout

[runway-github]

• fix(perps): fix truncated market names and Pro fees layout cp-8.7.0 (fix(perps): fix truncated market names and Pro fees layout cp-8.7.0 #34476)

Description

Long ETF and equity market names were overlapping the leverage badge and
price column in the market list, and the Pro market header title was
clipped too aggressively because it used a fixed maxWidth. The Pro
order summary fees row also cropped the VIP badge and used a different
text color than the other summary values.

This PR makes the market list title and header identity text shrink
around the leverage badge and right-side actions, removes the hardcoded
header name width, and adjusts the Pro fees summary row so the VIP badge
is fully visible and the fee value matches the other summary values.

Changelog

CHANGELOG entry: Fixed truncated market names in Perps market lists and
headers, and improved Pro order summary fees layout.

Related issues

Fixes:

Manual testing steps

Feature: Perps market layout truncation

  Scenario: market list shows long ETF names without overlapping price
    Given I am on the Perps Markets screen
    And I open the ETFs category
    When I view markets with long names such as "iShares MSCI South Korea ETF"
    Then the leverage badge stays within the row
    And the price column is not overlapped or clipped

  Scenario: Pro market header adapts to right-side actions
    Given I open a long-named market in Pro mode
    When the header shows wallet, favorite, and Pro toggle actions
    Then the market name truncates within the available center space
    And the leverage badge and chevron remain visible

  Scenario: Pro order summary fees row displays correctly
    Given I am on a Pro market order form with an active VIP fee discount
    When I view the order summary fees row
    Then the VIP badge is fully visible
    And the fee value uses the same color and weight as margin and liquidation values

Screenshots/Recordings

Before

Scenario	Screenshot
Pro order summary fees row	-
Market list (long ETF names)	<img width="300" alt="Market list ETFs"
src="https://github.com/user-attachments/assets/7c735f0a-c676-4816-9c48-c6be0652f439"
/>
Pro market header	<img width="300" alt="Pro market header"
src="https://github.com/user-attachments/assets/bca8b008-9b1c-4955-891d-5c564c7e4d5d"
/>

After

Scenario	Screenshot
Pro order summary fees row	<img width="300" alt="Pro order summary
fees row"
src="https://github.com/user-attachments/assets/ff6ac1a3-63aa-4318-be5c-acfa8e32e68d"
/>
Market list (long ETF names)	<img width="1206" height="2622"
alt="Simulator Screenshot - iPhone 17 - 2026-08-07 at 16 31 30"
src="https://github.com/user-attachments/assets/5ee0af4a-845f-4e65-bba7-ad58cc278dc2"
/>
Pro market header	<img width="1206" height="2622" alt="Simulator
Screenshot - iPhone 17 - 2026-08-07 at 16 31 34"
src="https://github.com/user-attachments/assets/0766d1ae-73be-445a-b251-070d523b79a2"
/>

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.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
• Use these power-user
  SRPs
  to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production
  performance metrics
• See trace() for usage and
  addToken
  for an example

For performance guidelines and tooling, see the Performance
Guide.

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.

Made with Cursor

Co-authored-by: Cursor cursoragent@cursor.com 82ae592

[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

⏭️ Smart E2E selection skipped - PR targets a release or stable branch (release/* or stable)

All E2E tests pre-selected.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 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

[gauthierpetetin]

No release label on PR. Adding release label release-8.7.0 on PR, as PR was cherry-picked in branch 8.7.0.