fix(predict): align carousel card CTAs on a shared inset (MetaMask#35806)

## **Description**

On the Predict home **Live now** carousel, the CTA row did not line up
between card variants: the crypto **Up / Down** card's buttons sat 4pt
higher than the neighbouring sports card's buttons.

The cause is not card height — every card in the rail is already exactly
220pt tall and each variant pins its CTAs to the bottom. The difference
was the inner container inset. `PredictMarketSportCard` used `p-3`
(12pt) in its compact/carousel branch, while every other carousel card
variant uses `p-4` (16pt):

| Card variant | Compact inset |
| --- | --- |
| `PredictCryptoUpDownMarketCard` | `p-4` (16pt) |
| `PredictMarketSingle` | `padding: 16` |
| `PredictMarketMultiple` | `padding: 16` |
| `PredictMarketSkeleton` | `p-4` (16pt) |
| `PredictMarketSportCard` | **`p-3` (12pt)** ← outlier |

Since both CTA rows are the same 40pt height, that 4pt inset difference
is exactly what pushed them out of alignment. This moves the sports card
onto the same 16pt inset, so the sports CTAs move up 4pt to meet the
crypto ones. The compact scoreboard sits in a `flex-1 justify-center`
box, so it simply re-centers in the slightly smaller content area — the
rail stays 220pt tall at production card width.

The fix is in the shared card component, so the Explore / Trending
predictions carousel gets the same alignment.

Verified by measuring the rendered button pixel bands on an iPhone 17
simulator rather than by eye:

| | Crypto CTA row | Sports CTA row | Delta |
| --- | --- | --- | --- |
| Before | rows 1590–1709 | rows 1602–1721 | **12px (4pt)** |
| After | rows 1590–1709 | rows 1590–1709 | **0px** |

Notes for the reviewer:

- No new test was added. `PredictMarketSportCard.test.tsx` is
behaviour-focused with no styling/`twClassName` assertions, so a padding
assertion would break that convention and be brittle. All 42 existing
sports card tests pass.
- The performance checkboxes below are left unchecked deliberately: this
is a padding-token-only change with no Android-specific or
runtime-performance surface.

## **Changelog**

CHANGELOG entry: Fixed Predict carousel cards so the action buttons line
up across cards.

## **Related issues**

Fixes: N/A. Visual alignment polish found while reviewing the Predict
home carousel; no tracking issue.

## **Manual testing steps**

```gherkin
Feature: Predict home Live now carousel

  Scenario: user compares CTA buttons across carousel cards
    Given the user is on the Predict home screen
    And the "Live now" carousel contains both a crypto Up/Down card and a sports card

    When user scrolls the carousel so two adjacent cards are visible
    Then the CTA buttons of both cards sit at the same vertical position
    And each card's CTA row is 16pt above the bottom edge of its card
    And no card content is clipped
```

## **Screenshots/Recordings**

The before/after pair below was captured with the carousel card width
temporarily reduced locally (not committed) so that two card variants
fit on screen at once — that is why the button labels are truncated. The
red guide line is drawn at the top edge of the crypto card's CTA row.

### **Before**

The sports card's `AL` / `BLG` buttons start below the guide line — 4pt
lower than the crypto card's.

<img width="800" alt="Before - sports CTA row 4pt lower than crypto CTA
row"
src="https://github.com/user-attachments/assets/5d6ae43a-ba66-4c6b-a59f-1b21ed4312eb"
/>

### **After**

Both CTA rows start exactly on the guide line.

<img width="800" alt="After - CTA rows aligned across card variants"
src="https://github.com/user-attachments/assets/3e96814e-d900-4774-9749-9653d4636e9e"
/>

At production card width (80% of screen), showing the rail is unchanged
at 220pt tall and the peeking card's CTA aligns:

<img width="800" alt="After at production card width"
src="https://github.com/user-attachments/assets/67016c55-4920-48fd-8393-f31e5bfbc1ca"
/>

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

Not applicable — padding-token-only change, no runtime or
platform-specific performance surface.

- [ ] 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](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Single Tailwind padding token in one card variant; visual alignment
only, no logic, data, or auth changes.
> 
> **Overview**
> **Predict sports carousel cards** now use the same **16pt (`p-4`)**
inner padding as the other Live now / Explore carousel variants instead
of **12pt (`p-3`)** in compact mode.
> 
> That **4pt** inset change lines up the sports buy-button row with
crypto and other card CTAs (both rows are bottom-pinned in the fixed
**220pt** rail) without changing card height; the compact scoreboard
recenters in the slightly tighter content area.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
715c3e8. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: andrewchra

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx

@@ -307,7 +307,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
           </Box>
         )}
 
-        <Box twClassName={isCompact ? 'flex-1 p-3' : 'p-4 gap-4'}>
+        <Box twClassName={isCompact ? 'flex-1 p-4' : 'p-4 gap-4'}>
           <Text
             variant={TextVariant.HeadingSm}
             color={TextColor.TextDefault}