fix(perps): make market detail price/change row scroll instead of sticky

[michalconsensys]

Description

On the Perps market detail screen, the live price and 24h price-change row (together with the fullscreen chart button) was rendered in the fixed area between the header and the ScrollView, which made it "sticky" — it stayed pinned below the header while the rest of the content scrolled, effectively behaving like part of the header.

This PR moves that summary row into the ScrollView as its first child so it is no longer part of/pinned to the header and now scrolls together with the page content. There is no visual change at rest (initial scroll position): the row keeps its px-4 pb-2 spacing and the chart section keeps its marginTop, so ordering and spacing are identical — only the stickiness behavior changes.

1. Reason for the change: The price/change row should not be sticky and should not be treated as part of the header.
2. Improvement/solution: Relocate the market summary row (MARKET_SUMMARY) from outside the ScrollView to inside it, above the chart section, so it scrolls with the content.

Changelog

CHANGELOG entry: Fixed the Perps market detail screen so the live price and 24h change row scrolls with the page instead of staying stuck below the header.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-3348

Manual testing steps

Feature: Perps market detail price row is not sticky

  Scenario: user scrolls the market detail screen
    Given the user is on a Perps market detail screen
    And the live price and 24h change row is shown below the header

    When the user scrolls down the content
    Then the price and 24h change row scrolls away with the content
    And it does not remain pinned below the header
    And at the top of the screen the layout looks unchanged from before

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.17.-.2026-07-16.at.12.54.29.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.

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
Single layout-tree move in one Perps screen with no logic, API, or test ID changes—low regression risk beyond scroll UX.

Overview
On Perps market details, the row with live price, 24h change, and the fullscreen chart control was sitting in the fixed gap between PerpsMarketInlineHeader and the ScrollView, so it stayed pinned under the header while the chart and rest of the page scrolled.

This change relocates that MARKET_SUMMARY block to the first child inside ScrollView (still above the chart section). Layout, spacing (px-4 pb-2), and test IDs are unchanged; only scroll behavior changes so the price row moves with the content instead of acting like part of the header.

^{Reviewed by Cursor Bugbot for commit d4c1b4b. 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.

[metamask-ci]

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

Warnings — informational, address before merging:

• Pre-merge author checklist has unchecked items (e.g. "I've tested on Android"). 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, SmokeConfirmations
• Selected Performance tags: @PerformancePreps
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The change in PerpsMarketDetailsView.tsx is a UI layout adjustment: the LivePriceHeader + fullscreen chart button block was moved from outside the ScrollView (sticky/fixed below the header) to inside the ScrollView (scrollable with content). No test IDs were removed or changed, no business logic was altered, and no component props changed. The change is purely positional/layout.

SmokePerps is selected because this is the primary Perps market details view — the layout change could affect how elements are found/interacted with in E2E tests (e.g., if elements are now scrolled off-screen). Multiple smoke specs (perps-position.spec.ts, perps-position-liquidation.spec.ts, perps-limit-long-fill.spec.ts, perps-position-stop-loss.spec.ts) use PerpsMarketDetailsView and should be validated.

SmokeWalletPlatform is selected per the tag description: "Perps is also a section inside the Trending tab (SmokeWalletPlatform); changes to Perps views affect Trending."

SmokeConfirmations is selected per the SmokePerps tag description: "When selecting SmokePerps, also select SmokeConfirmations (Add Funds deposits are on-chain transactions)."

Performance Test Selection:
The performance spec tests/performance/onboarding/perps-position-management.spec.ts uses the PerformancePreps tag and directly interacts with PerpsMarketDetailsView (waiting for the header, tapping long/close buttons). The layout change (moving LivePriceHeader inside ScrollView) could affect element visibility and timing in the performance test flow, so @PerformancePreps should run to validate no performance regression was introduced.

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

[github-actions]

⚡ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

✅ All tests passed · 2 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

✅ Passed Tests (2)

Test	Platform	Device	Duration	Team	Recording
Perps add funds	Android	Google Pixel 8 Pro (v14.0)	8.55s	@mm-perps-engineering-team	📹 Watch
Perps open position and close it	Android	Google Pixel 8 Pro (v14.0)	15.61s	@mm-perps-engineering-team	📹 Watch

---

Branch: fix/perps-market-detail-price-not-sticky · Build: Normal · Commit: 28a94c9 · View full run