fix(accounts): vertically align row arrows on account details page by yanrong-chen · Pull Request #46822 · MetaMask/metamask-extension

yanrong-chen · 2026-09-30T20:52:48Z

Description

On the account details page, the > arrow at the end of each row sat slightly higher than the text next to it. This PR centres the arrows so they line up with the text in every row, including Account name, Networks, Private keys, Smart Account, Wallet, Secret Recovery Phrase and Remove account.

Changelog

CHANGELOG entry: Fixed the vertical alignment of the arrow icons on the account details page.

Manual testing steps

Run the extension and unlock a wallet.
Open the account menu and go to an account's details page.
Verify the > arrow in each row is vertically centred with the row's text.

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension 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.

The arrow ButtonIcon in each row was wrapped in a block-level Box. Since ButtonIcon is inline-flex, it sat on the wrapper's text baseline, adding descender space below it and pushing the arrow above the row's vertical centre relative to the value text. Render the ButtonIcon directly inside the already flex/items-center value container so it is centred with the text. Co-authored-by: Yanrong Chen <yanrong-chen@users.noreply.github.com>

metamask-ci · 2026-09-30T20:53:10Z

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (2 files, +55 -62)

📁 ui/
- 📁 components/
  - 📁 multichain-accounts/
    - 📁 multichain-srp-backup/
      - 📄 multichain-srp-backup.tsx +7 -8
- 📁 pages/
  - 📁 multichain-accounts/
    - 📁 multichain-account-details-page/
      - 📄 multichain-account-details-page.tsx +48 -54

metamask-ci · 2026-09-30T21:08:46Z

Builds ready [581a3a5]

⚠️ Make sure the build is safe before downloading and running this build.
- Please do not use these builds with accounts that contain significant real money.
- Beware the security risks of cache poisoning.
Webpack builds: chrome, firefox
Webpack builds (beta): chrome, firefox
Webpack builds (flask): chrome, firefox
Webpack builds (test): chrome, firefox
Webpack builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
bundle analyzer: Bundle Analyzer
interaction-benchmark: Interaction Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts

⚡ Performance Benchmarks (Total: 🟢 8 pass · 🟡 3 warn · 🔴 2 fail)

Baseline (latest main): 171ed20 | Date: 7/28/2026 | Pipeline: 36775702107 | Baseline logs

Metrics chrome-webpack firefox-webpack
loadNewAccount
[Sentry log · main/release] 🔴 load_new_account(p95) [CI log] 🔴 load_new_account(p95) [CI log]

Regressions (🔴 2 failures)

loadNewAccount [Sentry log · main/release] · chrome-webpack — load_new_account(p75) [CI log]
loadNewAccount [Sentry log · main/release] · firefox-webpack — load_new_account(p75) [CI log]

Interaction Benchmarks · Samples: 5 🔴 2

Benchmark chrome-webpack firefox-webpack
loadNewAccount
[Sentry log · main/release] 🔴 [CI log]
🔴 load_new_account
🔴 [CI log]
🔴 load_new_account
confirmTx
[Sentry log · main/release] 🟡 [CI log] 🟢 [CI log]
bridgeUserActions
[Sentry log · main/release] 🟡 [CI log] 🟢 [CI log]

📈 Results compared to the previous 5 runs on main
↑ loadNewAccount/load_new_account: +418%
↑ loadNewAccount/total: +418%
↑ confirmTx/longTaskCount: +33%
↑ confirmTx/longTaskTotalDuration: +67%
↑ confirmTx/longTaskMaxDuration: +78%
↑ confirmTx/tbt: +92%
↓ confirmTx/inp: -17%
↑ bridgeUserActions/bridge_load_page: +160%
↑ bridgeUserActions/bridge_load_asset_picker: +38%
↑ bridgeUserActions/longTaskCount: +67%
↑ bridgeUserActions/longTaskTotalDuration: +121%
↑ bridgeUserActions/longTaskMaxDuration: +34%
↑ bridgeUserActions/tbt: +239%
↑ bridgeUserActions/total: +12%
↑ loadNewAccount/load_new_account: +422%
↑ loadNewAccount/total: +422%
↓ loadNewAccount/inp: -24%
↓ loadNewAccount/fcp: -45%
↑ loadNewAccount/lcp: +1130%
↓ confirmTx/longTaskCount: -100%
↓ confirmTx/longTaskTotalDuration: -100%
↓ confirmTx/longTaskMaxDuration: -100%
↓ confirmTx/tbt: -100%
↓ confirmTx/inp: -24%
↓ confirmTx/fcp: -45%
↑ confirmTx/lcp: +1164%
↑ bridgeUserActions/bridge_load_page: +319%
↑ bridgeUserActions/bridge_load_asset_picker: +81%
↓ bridgeUserActions/longTaskCount: -100%
↓ bridgeUserActions/longTaskTotalDuration: -100%
↓ bridgeUserActions/longTaskMaxDuration: -100%
↓ bridgeUserActions/tbt: -100%
↑ bridgeUserActions/total: +45%
↑ bridgeUserActions/inp: +38%
↑ bridgeUserActions/lcp: +1082%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)
🟡 loadNewAccount/FCP: p75 1.9s
🟡 confirmTx/FCP: p75 1.9s
🟡 bridgeUserActions/FCP: p75 1.9s

Startup Benchmarks · Samples: 100

Benchmark chrome-webpack firefox-webpack
startupStandardHome
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]

📈 Results compared to the previous 5 runs on main
↑ startupStandardHome/uiStartup: +14%
↑ startupStandardHome/load: +15%
↑ startupStandardHome/domContentLoaded: +14%
↑ startupStandardHome/domInteractive: +18%
↑ startupStandardHome/firstPaint: +16%
↓ startupStandardHome/firstReactRender: -99%
↓ startupStandardHome/initialActions: -33%
↑ startupStandardHome/loadScripts: +14%
↑ startupStandardHome/setupStore: +52%
↑ startupStandardHome/numNetworkReqs: +10%
↑ startupStandardHome/longTaskMaxDuration: +13%
↑ startupStandardHome/tbt: +15%
↑ startupStandardHome/inp: +14%
↑ startupStandardHome/fcp: +15%
↑ startupStandardHome/lcp: +18%
↓ startupStandardHome/domInteractive: -34%
↓ startupStandardHome/firstReactRender: -98%
↓ startupStandardHome/initialActions: -50%
↑ startupStandardHome/setupStore: +169%
↓ startupStandardHome/fcp: -30%

User Journey Benchmarks · Samples: 5 · mock API

Benchmark chrome-webpack firefox-webpack
onboardingImportWallet
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
onboardingNewWallet
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
🟡 total

📈 Results compared to the previous 5 runs on main
↑ onboardingImportWallet/confirmSrpToPwForm: +13%
↓ onboardingImportWallet/doneButtonToHomeScreen: -94%
↓ onboardingImportWallet/openAccountMenuToAccountListLoaded: -75%
↓ onboardingImportWallet/longTaskCount: -86%
↓ onboardingImportWallet/longTaskTotalDuration: -96%
↓ onboardingImportWallet/longTaskMaxDuration: -93%
↓ onboardingImportWallet/tbt: -100%
↓ onboardingImportWallet/total: -89%
↑ onboardingNewWallet/srpButtonToPwForm: +11%
↓ onboardingNewWallet/doneButtonToAssetList: -83%
↓ onboardingNewWallet/longTaskCount: -100%
↓ onboardingNewWallet/longTaskTotalDuration: -100%
↓ onboardingNewWallet/longTaskMaxDuration: -100%
↓ onboardingNewWallet/tbt: -100%
↓ onboardingNewWallet/total: -79%

Dapp Page Load Benchmarks · Samples: 100

Benchmark chrome-webpack
dappPageLoad
[Sentry log · main/release] 🟢 [CI log]

📈 Results compared to the previous 5 runs on main
↓ dappPageLoad/pageLoadTime: -66%
↓ dappPageLoad/domContentLoaded: -22%
↓ dappPageLoad/firstPaint: -50%
↓ dappPageLoad/firstContentfulPaint: -50%

Bundle Size Diffs

Status	Bundle	Total	Diff	Change
✅	background	15.56 MiB	+120 Bytes	0.00%
✅	ui	18.98 MiB	-101 Bytes	0.00%
✅	common	0 Bytes	0 Bytes	0.00%
✅	other	1.69 MiB	0 Bytes	0.00%
✅	content scripts	1.97 MiB	0 Bytes	0.00%
✅	zip	22.93 MiB	+46 Bytes	0.00%

sonarqubecloud · 2026-09-30T21:11:17Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

yanrong-chen deployed to pr-comment September 30, 2026 20:52 — with GitHub Actions Active

github-actions Bot added the size-M label Sep 30, 2026

yanrong-chen added the team-accounts-framework Accounts team label Sep 30, 2026

yanrong-chen deployed to pr-comment September 30, 2026 21:08 — with GitHub Actions Active

yanrong-chen marked this pull request as ready for review September 30, 2026 21:31

yanrong-chen requested a review from a team as a code owner September 30, 2026 21:31

yanrong-chen deployed to pr-comment September 30, 2026 21:31 — with GitHub Actions Active

gantunesr approved these changes Sep 30, 2026

View reviewed changes

yanrong-chen enabled auto-merge September 30, 2026 22:11

georgewrmarshall approved these changes Sep 30, 2026

View reviewed changes

yanrong-chen added this pull request to the merge queue Sep 30, 2026

Merged via the queue into main with commit 3c658fb Sep 30, 2026
158 of 159 checks passed

yanrong-chen deleted the cursor/align-account-details-arrow-0247 branch September 30, 2026 23:47

github-actions Bot locked and limited conversation to collaborators Sep 30, 2026

metamaskbot added the release-13.52.0 Issue or pull request that will be included in release 13.52.0 label Sep 30, 2026

Navigation Menu

fix(accounts): vertically align row arrows on account details page - #46822

fix(accounts): vertically align row arrows on account details page#46822
yanrong-chen merged 1 commit into
mainfrom
cursor/align-account-details-arrow-0247

yanrong-chen commented Sep 30, 2026 •

edited

Loading

Uh oh!

metamask-ci Bot commented Sep 30, 2026

Uh oh!

metamask-ci Bot commented Sep 30, 2026

Uh oh!

sonarqubecloud Bot commented Sep 30, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

yanrong-chen commented Sep 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

metamask-ci Bot commented Sep 30, 2026

✨ Files requiring CODEOWNER review ✨

Uh oh!

metamask-ci Bot commented Sep 30, 2026

Uh oh!

sonarqubecloud Bot commented Sep 30, 2026

Quality Gate passed

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

yanrong-chen commented Sep 30, 2026 •

edited

Loading