Commit fbfbf17
authored
fix(bridge): align swap token inputs with quote details (#27730)
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->
## **Description**
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->
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](https://consensyssoftware.atlassian.net/browse/SWAPS-4268).
## **Changelog**
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`
(This helps the Release Engineer do their job more quickly and
accurately)
-->
CHANGELOG entry: Fixed swap amount fields not lining up horizontally
with swap quote details on mobile
## **Related issues**
Fixes:
Refs:
[SWAPS-4268](https://consensyssoftware.atlassian.net/browse/SWAPS-4268)
## **Manual testing steps**
```gherkin
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**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
N/A
### **After**
N/A
## **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.
## **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.
<!-- Generated with the help of the pr-description AI skill -->1 parent bf03a94 commit fbfbf17
1 file changed
Lines changed: 1 addition & 1 deletion
Lines changed: 1 addition & 1 deletion
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
12 | 12 | | |
13 | 13 | | |
14 | 14 | | |
15 | | - | |
| 15 | + | |
16 | 16 | | |
17 | 17 | | |
18 | 18 | | |
| |||
0 commit comments