fix: homepage spacing tweaks and perps sparkline padding

[wachunei]

Description

Minor spacing tweaks for the homepage sections:

1. Add top margin to the homepage container -- Adds marginTop={4} (4 units) to the main Homepage Box to create breathing room between the action buttons and the first section.

2. Add horizontal margin to perps sparkline -- The sparkline chart in PerpsMarketTileCard was touching the edges of the card. Adds 4 units of horizontal margin to the sparkline container and adjusts the sparkline width calculation accordingly, matching the Figma spec.

3. Adjust section gap -- Changed the gap between homepage sections from 12 to 10 units for better visual balance.

Changelog

CHANGELOG entry: null

Related issues

Refs: https://consensyssoftware.atlassian.net/browse/TMCU-541

Manual testing steps

Feature: Homepage spacing tweaks

  Scenario: Sections have top margin and adjusted gap
    Given user is on the homepage
    When user views the sections area
    Then there is spacing above the Tokens section
    And the gap between sections is 10 units

  Scenario: Perps sparkline has horizontal padding
    Given user is on the homepage with the Perps carousel visible
    When user views a perps market tile card
    Then the sparkline chart has padding on left and right edges

Screenshots/Recordings

N/A -- spacing-only changes, verified on device.

Before

Sections top margin

Perpetuals Market Card

After

Sections top margin

Perpetuals Market Card

Sections Gap

10-empty.mp4

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.

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

^{Cursor Bugbot is generating a summary for commit 5f8d7fb. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are purely visual/styling modifications:

1. Homepage.tsx: Minor layout adjustment - gap changed from 12 to 10, added marginTop of 4. This affects the spacing between sections in the Homepage container.

2. PerpsMarketTileCard.styles.ts & PerpsMarketTileCard.tsx: Added horizontal margin (16px) to the sparkline container and adjusted the sparkline width calculation to account for this margin. This is a visual refinement for the Perps market tile cards.

These are low-risk styling changes that don't modify any business logic, data flow, or functionality. However, they affect:

• The Perps section visual appearance (PerpsMarketTileCard is used in the Perps carousel)
• The Homepage layout which contains multiple sections including Perps

Per the tag descriptions:

• SmokePerps: Required because changes affect Perps views (PerpsMarketTileCard component)
• SmokeWalletPlatform: Required because "Perps is also a section inside the Trending tab" and "changes to Perps views (headers, lists, full views) affect Trending"

The tag description for SmokePerps also states: "When selecting SmokePerps, also select SmokeWalletPlatform (Trending section)".

Performance Test Selection:
These are minor styling changes (margin and gap adjustments) that don't significantly impact rendering performance. The changes only affect static layout properties (marginHorizontal, marginTop, gap) and a simple width calculation. No new components are added, no data fetching is modified, and no complex rendering logic is changed. The sparkline width adjustment is a simple arithmetic operation that won't affect performance.

View GitHub Actions results

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
7 value mismatches detected (expected — fixture represents an existing user).
View details

[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