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

[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 conditional UI; no auth, data, or trading logic changes.

Overview
Implements PRED-1089 design QA polish across the redesigned Predict home and feed surfaces.

Predict home: Title uses HeadingMd (aligned with Perps). Bottom safe area is turned off to remove the black bar. Portfolio and sections use a single gap-6 wrapper instead of per-section vertical margins. Section headers get tighter padding; Popular Today chips use default text color; Trending list spacing is tightened (gap-1).

Predict feed: PredictChipList only renders when there are two or more filters (e.g. Live feed no longer shows a lone chip). Chip list bottom padding is reduced (pb-3).

Live carousel cards: Compact crypto cards get a smaller progress ring/logo (ProgressLogo compact mode), “Resets every …” sits under the title, and compact sport cards use full height with centered scoreboard and adjusted button spacing. Sports live label is LIVE (uppercase); tests updated accordingly.

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

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePredictions, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: @PerformancePredict
• Risk Level: medium
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 13 changed files are within the app/components/UI/Predict/ directory, making this a focused change to the Predictions (Polymarket) feature UI.

Key changes:

1. PredictFeedView.tsx: Conditional rendering of filter chips (only shown when ≥2 chips exist) — functional behavior change
2. PredictHome.tsx: Layout restructuring with gap-based spacing, SafeAreaView edges changed from 'additive' to 'off', title text variant changed (DisplayMd → HeadingMd)
3. PredictChipList.tsx: Minor padding adjustment
4. PredictMarketSportCard.tsx: Carousel height fix (h-full), compact mode layout adjustments
5. PredictSportScoreboard.tsx: Text "Live" → "LIVE"
6. PredictCryptoUpDownMarketCard.tsx: Compact mode support for progress ring sizing, text repositioning ("Resets every" moved above buttons)
7. Section components (Categories, LiveNow, PopularToday, Trending): Margin removal (my-2 removed), spacing adjustments

Tags selected:

• SmokePredictions: Directly covers Polymarket prediction market integration — all changed components are part of the Predictions feature
• SmokeWalletPlatform: Per tag description, Predictions is a section inside the Trending tab; changes to Predictions views (headers, lists, full views) affect Trending. Also required when selecting SmokePredictions.
• SmokeConfirmations: Required per SmokePredictions tag description (opening/closing positions are on-chain transactions)

No other tags are needed as changes are isolated to the Predict UI components with no impact on navigation, browser, accounts, network, swap, stake, or other features.

Performance Test Selection:
The @PerformancePredict tag covers prediction market list loading, market details, deposit flows, and balance display. The changes to PredictHome layout (restructured sections with gap-based spacing), PredictFeedView (conditional chip rendering), and various card components (PredictMarketSportCard, PredictCryptoUpDownMarketCard) could affect render performance of the prediction market screens. The layout restructuring in PredictHome.tsx is particularly relevant as it changes how multiple sections are rendered.

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

[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