Description

Small set of UI polish tweaks to the Predict buy bottom sheet (sheet mode of PredictBuyWithAnyToken), based on design feedback on spacing and alignment.

What changed and why:

1. Header icon / close button alignment — the header used px-6 py-4, so the market icon (left) and the close X (right) were inset 24px while the content/pills below are inset 16px, making them look misaligned. Changed the header to px-4 py-4 so the icon's left padding equals its top padding and both the icon and X line up with the pills and rows beneath them.
2. Amount input caret — the blinking caret was sized off the text line-height (lineHeight - 4, ~66px for $0), making it taller than the digits and sitting a little far from the number. It now matches the glyph cap height (fontSize * 0.72) and sits closer (px-1 on the value text, ml-0 on the caret).
3. Quick-amount pills — reduced vertical footprint: row padding py-2 -> py-1, and pill height h-12 -> h-11 (44px, kept at the iOS minimum touch target). The pills remain edge-aligned with the pay-with/total rows via the shared px-4 inset.
4. Error banner spacing — the in-sheet error banner had uneven spacing (24px above from PredictFeeSummary's pb-6, 20px below from its own mb-5). Added -mt-1 so the top gap becomes 20px and matches the bottom gap, with a comment documenting the intent so it isn't a "magic" offset.

These are presentational (Tailwind class) changes only — no logic, data flow, or control flow was modified.

Files changed:

• app/components/UI/Predict/components/PredictPreviewSheet/PredictPreviewSheet.tsx
• app/components/UI/Predict/components/PredictAmountDisplay/PredictAmountDisplay.tsx
• app/components/UI/Predict/views/PredictBuyWithAnyToken/components/PredictQuickAmounts/PredictQuickAmounts.tsx
• app/components/UI/Predict/views/PredictBuyWithAnyToken/components/PredictBuyErrorBanner/PredictBuyErrorBanner.tsx

(4 files changed, 12 insertions(+), 6 deletions(-))

Note on shared components: PredictPreviewSheet is also used by the Predict sell sheet, and PredictAmountDisplay is also used by the legacy/fullscreen buy preview — so the header padding and caret tweaks apply consistently to those surfaces too.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: Predict buy bottom sheet polish

  Scenario: Header icon and close button are aligned with the content
    Given I am on a Predict market details screen
    When I tap an outcome to open the buy bottom sheet
    Then the market icon's left padding visually matches its top padding
    And the icon's left edge and the close (X) button's right edge line up with the quick-amount pills and the rows below

  Scenario: Amount caret matches the typography
    Given the buy bottom sheet is open with the keypad active
    When I look at the "$0" / amount value
    Then the blinking caret is about the height of the digits (not taller)
    And the caret sits close to the number

  Scenario: Quick-amount pills are compact and tappable
    Given the buy bottom sheet is open
    Then the $20 / $50 / $100 / $250 pills have a tighter vertical padding
    And each pill is still at least 44px tall and easy to tap
    And the pill row is edge-aligned with the "Pay with" and "Total" rows

  Scenario: Error banner is evenly spaced
    Given the buy bottom sheet is open and an order error banner is shown
    Then the spacing above the banner (from the Total row) equals the spacing below it (to the action button)

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

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.

Validation run locally

• yarn lint (eslint): 0 errors (2 pre-existing deprecation warnings on unchanged lines).
• yarn lint:tsc (tsc --noEmit): passes, 0 type errors.
• Unit tests: 4 suites / 49 tests pass (PredictAmountDisplay, PredictPreviewSheet, PredictBuyErrorBanner, PredictQuickAmounts).