chore: polish trader profile visual nits

[zone-live]

Description

Fix Open/Closed tab underline to use icon-default and align tab labels by reserving underline space on both tabs
Align perp badges with the rest of social leaderboard: title-case Long/Short labels, matched leverage/direction pill sizing, and signed +/- PnL percents instead of triangles

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TSA-812

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

NA

After

NA

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.

---

Note

Low Risk
Presentation-only changes in Social Leaderboard UI with no auth, data, or API impact; risk is limited to display regressions caught by updated tests.

Overview
Polishes Social Leaderboard trader profile visuals so tabs, position PnL, and perp metadata read consistently.

Open/Closed tabs on TraderProfileView now use a full-width icon-default underline on the active tab, with a transparent bar on the inactive tab so labels stay aligned.

Position rows drop ▲/▼ and unsigned percentages in favor of signed PnL percents (e.g. +182.00%, -25.00%, +0.00% at break-even) via default formatPercent in PositionRow.

Perp badges show localized Long/Short (no forced uppercase), and leverage uses the same muted pill styling as direction instead of PerpsLeverage; unit tests were updated to match.

^{Reviewed by Cursor Bugbot for commit 36b690b. Bugbot is set up for automated code reviews on this repo. 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.

[mm-token-exchange-service]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• Manual testing steps still contain template content (the Gherkin example title or a [...] placeholder). Replace with real steps, or write N/A — <reason>.
• Pre-merge author checklist has unchecked items (e.g. "I've documented my code using JSDoc format if applicable"). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 6 changed files are within the SocialLeaderboard component directory. The changes are:

1. TraderProfileView.tsx: Minor styling change to the active tab indicator (cosmetic UI tweak)
2. PerpBadges.tsx: Replaced PerpsLeverage component with inline Box+Text, changed direction text from uppercase (LONG/SHORT) to title case (Long/Short)
3. PositionRow.tsx: Changed PnL display from directional triangle + unsigned percent to signed percent format (+182%, -25%)
4. Three test files updated to match the new behavior

These are UI display changes within the Social Leaderboard / Perps feature area. SmokePerps is selected because the changes directly affect perp position display components (PerpBadges, PositionRow) used in the trader profile. SmokeWalletPlatform is selected per the tag description which states Perps is a section inside the Trending tab and changes to Perps views affect Trending. SmokeConfirmations is NOT selected because these changes don't touch the Add Funds flow or any transaction confirmation path — they only affect display formatting in the leaderboard/position list views. No core controllers, navigation, shared modals, or infrastructure are affected.

Performance Test Selection:
The changes are purely UI display formatting changes within the SocialLeaderboard component (text casing, icon replacement with inline component, styling tweaks). No performance-sensitive code paths, data fetching, rendering loops, or app launch/onboarding flows are affected. No performance test tags are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud