fix(predict): Design QA feedback to the redesigned Predict home and feed cp-8.3.0

[caieu]

Description

Applies the PRED-1089 Design QA feedback to the redesigned Predict home and feed:

• Aligns the Predict home title, section spacing, headers, chip colors, card spacing, and bottom safe-area treatment with the approved designs.
• Hides the feed filter list when fewer than two filter options are available, avoiding a redundant single chip on the Live feed.
• Refines compact Live carousel cards, including the BTC progress icon, reset-label placement, sports scoreboard spacing, button alignment, and uppercase LIVE status.
• Reduces the shared filter-chip container bottom padding for consistent feed spacing.

Automated validation

• npx jest -c jest.config.view.js app/components/UI/Predict/views/PredictHome/PredictHome.view.test.tsx --runInBand --silent --coverage=false
• npx jest app/components/UI/Predict/views/PredictFeedView/PredictFeedView.test.tsx --runInBand --coverage=false
• npx jest app/components/UI/Predict/components/PredictCryptoUpDownMarketCard/PredictCryptoUpDownMarketCard.test.tsx --runInBand --coverage=false
• npx jest app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.test.tsx --runInBand --coverage=false
• npx jest app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.test.tsx --runInBand --coverage=false

Changelog

CHANGELOG entry: Fixed spacing and styling inconsistencies on the Predict home and live market views

Related issues

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

Manual testing steps

Feature: Predict Design QA polish

  Scenario: View the redesigned Predict home
    Given the Predict home redesign is enabled
    And the user opens Predict
    When the Predict home finishes loading
    Then the title size matches the Perps home title
    And the portfolio and market sections have 24px spacing
    And the screen has no black bottom safe-area bar
    And Popular Today and Trending use the updated text and card spacing

  Scenario: View live market cards
    Given the Predict home contains live crypto and sports markets
    When the user views the Live Now carousel
    Then the compact BTC icon and progress ring match the approved dimensions
    And the BTC reset label appears directly below the title
    And the crypto and sports action buttons align at the bottom of their cards
    And the sports status displays as "LIVE"

  Scenario: Open a feed with filter options
    Given the user opens a Predict feed
    When the feed has fewer than two filter options
    Then the filter list is hidden
    When the feed has two or more filter options
    Then the filter list is displayed

Screenshots/Recordings

N/A — Design QA evidence is tracked in PRED-1089; attach the final simulator screenshots when opening the PR.

Before

N/A — see PRED-1089.

After

Screen.Recording.2026-07-15.at.16.31.02.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
  • N/A — presentation-only changes with no performance-sensitive operations.
• I've tested with a power user scenario
  • N/A — the changes do not depend on account or asset volume.
• I've instrumented key operations with Sentry traces for production performance metrics
  • N/A — no new key operations or asynchronous workflows were introduced.

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 spacing, typography, and layout changes in Predict UI with no auth, data, or trading logic touched.

Overview
Applies PRED-1089 styling polish across Predict home and live market UI.

Predict home uses a smaller title (HeadingMd), turns off the bottom safe-area inset to remove the black bar, and groups portfolio + sections in a gap-6 stack while dropping per-section vertical margins. Section headers and list spacing are tightened (e.g. Trending card gap-1, Popular Today chips use default text color).

Live carousel cards: compact crypto cards get a smaller progress ring/logo via a compact ProgressLogo, with “Resets every …” moved directly under the title; compact sports cards use full-height carousel layout and centered scoreboard with bottom-aligned buy buttons.

Shared tweaks: sport scoreboard live label is LIVE (tests updated); filter chip list default container padding is pb-3 instead of pb-4.

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

[github-actions]

⚡ Performance Test Results

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

❌ 1 test failed · 3 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

❌ Failed Tests (1)

@team-predict

Test	Platform	Device	Reason	Recording
Predict Deposit - Complete Flow Performance	Android	Google Pixel 8 Pro (v14.0)	Quality gates exceeded	📹 Watch

✅ Passed Tests (2)

Test	Platform	Device	Duration	Team	Recording
Predict Market Details - Complete Flow Performance	Android	Google Pixel 8 Pro (v14.0)	4.19s	@team-predict	📹 Watch
Predict Available Balance - Complete Flow Performance	Android	Google Pixel 8 Pro (v14.0)	2.26s	@team-predict	📹 Watch

---

Branch: predict/PRED-1089-styling-spacing-tweaks-design-qa · Build: Normal · Commit: 25654c1 · View full run

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit f269bd0. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePredictions, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 11 changed files are UI/layout changes within the Predict feature (app/components/UI/Predict/). Changes include: layout restructuring in PredictHome (SafeAreaView edge, text variant, section wrapping), padding/margin adjustments across section components (PredictCategoriesSection, PredictLiveNowSection, PredictPopularTodaySection, PredictTrendingSection), compact mode additions to PredictCryptoUpDownMarketCard, layout fixes in PredictMarketSportCard, and a text case change in PredictSportScoreboard ('Live' → 'LIVE'). Unit tests were updated to match the text change. No functional logic, API calls, navigation, or controller changes are present. SmokePredictions is selected as the primary tag for the directly affected Predictions feature. SmokeWalletPlatform is selected per its tag description which states Predictions is a section inside the Trending tab and changes to Predictions views affect Trending. SmokeConfirmations is selected per SmokePredictions tag description which states opening/closing positions are on-chain transactions requiring confirmations.

Performance Test Selection:
All changes are purely UI/layout adjustments (spacing, padding, text variants, margin removals, compact mode sizing). There are no algorithmic changes, new data fetching, or rendering logic changes that would meaningfully impact performance metrics. The @PerformancePredict tag covers prediction market list loading and market details, but these cosmetic layout changes do not affect measured performance behavior.

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