fix: Input isn't centered in withdraw flow#41942
Merged
HowardBraham merged 7 commits intomainfrom Apr 28, 2026
Merged
Conversation
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Contributor
Builds ready [4078a94] [reused from eb8d4b6]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 8 warn · 🔴 0 fail)
Bundle size diffs
|
Add w-full to PerpsFiatHeroAmountInput container so justify-content: center correctly centers the [$][amount] row at all viewport widths, including the narrow popup. Without it the box was content-sized (~82% of parent), causing apparent left-alignment in popup mode.
Contributor
✨ Files requiring CODEOWNER review ✨👨🔧 @MetaMask/perps (2 files, +61 -21)
|
Contributor
Author
Worker reportFix Report — TAT-2847: Input isn't centered in withdraw flowSummaryThe hero fiat amount input ( Root CauseFile: The outer Measured before fix: Changes
Test PlanAutomated:
Manual Gherkin: Evidence
TicketWorkflow Diagram (Mermaid)flowchart TD Recipe workflow diagramflowchart TD
%% Perps withdraw input centering proof
__entry__(["ENTRY"]) --> node_setup_navigate_withdraw
node_setup_navigate_withdraw["setup-navigate-withdraw<br/>ext_navigate_hash"]
node_setup_wait_withdraw_page["setup-wait-withdraw-page<br/>wait_for"]
node_ac1_click_ten_percent["ac1-click-ten-percent<br/>press"]
node_ac1_wait_non_zero_amount["ac1-wait-non-zero-amount<br/>wait_for"]
node_ac1_assert_full_width_centered["ac1-assert-full-width-centered<br/>eval_sync"]
node_ac1_screenshot_centered["ac1-screenshot-centered<br/>screenshot"]
node_teardown_navigate_home["teardown-navigate-home<br/>ext_navigate_hash"]
node_setup_navigate_withdraw --> node_setup_wait_withdraw_page
node_setup_wait_withdraw_page --> node_ac1_click_ten_percent
node_ac1_click_ten_percent --> node_ac1_wait_non_zero_amount
node_ac1_wait_non_zero_amount --> node_ac1_assert_full_width_centered
node_ac1_assert_full_width_centered --> node_ac1_screenshot_centered
node_ac1_screenshot_centered --> node_teardown_navigate_home
|
Contributor
Builds ready [21ac102]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 8 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Author
|
Acknowledged @MetaMask/perps CODEOWNERS notification. Changes are limited to |
Contributor
Builds ready [153f3c2]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 8 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Author
Worker reportNo report available. |
aganglada
reviewed
Apr 20, 2026
Contributor
aganglada
left a comment
aganglada
left a comment
There was a problem hiding this comment.
Isn't before and after looking the same?
Contributor
Author
yes I wanted to update the screenshot, the fix is working but it doesn't show because the input has a lot of decimals |
Contributor
Builds ready [02101ad]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 8 warn · 🔴 0 fail)
Bundle size diffs
|
Member
|
I've pulled this down and ran it, but it seems like the Withdraw amount (with many decimals) is still not centered. Could you double check that this is fixed in this PR? Let me know if I'm doing anything wrong here. 
|
Contributor
It still doesn't seem to be centered |
…nput Replace width: Xch with field-sizing: content so the input shrinks/grows to its actual rendered text width. The ch unit overestimates width for decimal amounts (decimal point is ~0.3ch) causing visual left-shift that w-full alone could not fix. Also replace brittle className assertions in tests with behavioral checks.
…ask/metamask-extension into fix/tat-2847-center-withdraw-input
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit a4dc701. Configure here.
Contributor
Builds ready [a4dc701]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 7 warn · 🔴 1 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
field-sizing:content is not supported in Firefox. Replace with an absolute-overlay approach: a hidden clone (white-space:pre) sets the outer span's width to the exact rendered text width; the input overlays it absolutely. Absolutely-positioned children are out-of-flow so they don't affect the parent's max-content calculation, avoiding the circular dependency that caused the inline-grid approach to stretch to full width.
|
Contributor
Builds ready [ed2d3b5]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 8 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
gambinish
approved these changes
Apr 27, 2026
geositta
approved these changes
Apr 27, 2026
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
HowardBraham
added
the
retry-ci
github-actions
Bot
removed
the
retry-ci
metamaskbot
added
the
release-13.30.0
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
7 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The hero amount input (
$X.XX) in the perps withdraw flow was not centered in narrow popup viewports. Two issues:Container width:
PerpsFiatHeroAmountInputwas content-sized (~82% of parent), sojustify-content: centerhad no room to center. Fixed by addingclassName="w-full"to the container box and skeleton.Input width with decimal amounts: the input used
width: Xch(ch= width of'0'). Since.is ~0.3ch wide, amounts like$270.741456appeared left-of-center even after the container fix.Fixed using an absolute-overlay pattern: a hidden clone span (same font,
white-space: pre) drives the outer span's width to the exact rendered text width; the input overlays it withposition: absolute; inset: 0. Absolutely-positioned children are out-of-flow so they don't affect the parent'smax-contentcalculation — avoiding the circular dependency that caused earlier approaches (inline-grid,field-sizing: content) to fail or be non-cross-browser.Changelog
CHANGELOG entry: null
Related issues
Fixes: TAT-2847
Manual testing steps
$X.XXamount is horizontally centered — equal left/right margins at all digit lengths, including amounts with many decimals.Screenshots/Recordings
Before
Amount was left-aligned (especially visible with decimal values like
$270.741456).After
$270)$270.741456)leftGap: 156, rightGap: 156, offset: 0leftGap: 44, rightGap: 44, offset: 0contentCenter == viewportCenter(offset = 0) at all tested lengths.Pre-merge author checklist
Pre-merge reviewer checklist