Description

After the quote card was updated to match Figma (#21656), horizontal padding was removed from quoteContainer, so QuoteDetailsCard content uses a 16px gutter from QuoteDetailsCard.styles.ts. The swap token row wrapper (inputsContainer in BridgeView.styles.ts) still used 24px, so the large amount text and fiat values sat 8px further in than the Rate / Network fee / Slippage rows.

This change sets inputsContainer.paddingHorizontal to 16 so the swap inputs share the same left edge as the quote details (and match the trending section’s px-4 gutter). Addresses SWAPS-4268.

Changelog

CHANGELOG entry: Fixed swap amount fields not lining up horizontally with swap quote details on mobile

Related issues

Fixes:

Refs: SWAPS-4268

Manual testing steps

Feature: Swap / Bridge quote layout

  Scenario: swap amounts align with quote details
    Given I am on the Swap screen with tokens selected and a non-zero source amount
    And an active quote is shown with the quote details card visible

    When I view the source and destination amount rows and the rows below (Rate, Network fee, Slippage, etc.)

    Then the left edge of the amount and fiat text should align with the left edge of the detail labels

Screenshots/Recordings

Before

N/A

After

N/A

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.