Description

This PR makes the Predict game details screen (PredictGameDetailsContent) behave like the standard PredictMarketDetails screen when switching between outcome-group chips (game lines / exact score / halftime) or the Positions/Outcomes tabs. It fixes two visual issues:

1. Screen jumping on tab/chip change. The component drove an imperative scrollTo on every chip selection (plus a follow-up InteractionManager.runAfterInteractions pass) to force the sticky header to the top, propped up by a windowHeight-based minHeight on the tab content. This caused the screen to jump downward on every switch. The regular market details screen never does this — it relies solely on the ScrollView's stickyHeaderIndices. Removed the manual scroll machinery (scrollRef, stickyHeaderY, pendingChipScroll, the layout handler, and the effect) and the minHeight wrapper, so switching chips/tabs now only swaps the content below the sticky header and preserves scroll position.

2. Chart overlapping the outcomes. PredictGameChartContent used flex-1 on its loaded/error/empty containers. Inside a ScrollView, flex-1 collapses to zero height, so the fixed 200px chart View overflowed downward onto the chip bar and the first outcome card. Switched the containers to w-full so they size to their content — matching the market details chart (PredictDetailsChart), which never used flex-1.

Both changes are layout-only. Existing unit tests for PredictGameChart and PredictGameDetailsContent (218 tests) pass unchanged, including the reserves chart height only while loading test.

Changelog

CHANGELOG entry: Fixed the Predict sports game details screen jumping and the price chart overlapping the outcomes when switching between markets

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-954

Manual testing steps

Feature: Predict game details market/tab switching

  Scenario: Switching outcome-group chips does not jump or overlap the chart
    Given I open a sports game market with extended outcomes (e.g. game lines, exact score, halftime)
    And the price chart has loaded above the chip bar

    When I tap a different chip (e.g. "Exact Score")
    Then the screen does not jump to pin the chip bar to the top
    And the chart keeps its height and does not overlap the outcomes list
    And the outcomes for the selected chip render below the chip bar

  Scenario: Switching Positions/Outcomes tabs preserves scroll position
    Given I open a sports game market that shows the Positions/Outcomes tab bar

    When I switch between the Positions and Outcomes tabs
    Then the scroll position is preserved (no downward jump)
    And the chart does not overlap any content

Screenshots/Recordings

Before

After

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.