fix: align additional networks info icon #39444

vinnyhoward · 2026-01-21T21:40:19Z

Description

The info icon next to the Additional networks label is too small, wrong color and not centered

Changelog

CHANGELOG entry:null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-668

Manual testing steps

Go to this the network picker
Scroll down to Additional Networks
Observe change

Screenshots/Recordings

before	after

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.

Note

Refines the layout and styling of the Additional Networks info icon.

Switches container from InlineFlex to Flex with centered alignItems/justifyContent for proper alignment
Updates info icon to size=Md and color=iconAlternative; removes top margin and wraps in centered Box
Imports AlignItems; adjusts related props and updates snapshot

^{Written by Cursor Bugbot for commit 8e0b885. This will update automatically on new commits. Configure here.}

Co-authored-by: vince.howard <[email protected]>

github-actions · 2026-01-21T21:40:45Z

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.

metamaskbotv2 · 2026-01-21T21:41:23Z

✨ Files requiring CODEOWNER review ✨

👨‍🔧 @MetaMask/core-extension-ux (2 files, +17 -7)

📁 ui/
- 📁 components/
  - 📁 multichain/
    - 📁 network-manager/
      - 📁 components/
        
        📁 additional-networks-info/
        
        📁 __snapshots__/
        
        📄 additional-networks-info.test.tsx.snap +3 -3
        
        📄 additional-networks-info.tsx +14 -4

metamaskbotv2 · 2026-01-21T22:30:19Z

Builds ready [8e0b885]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
- content-script: 0
- offscreen: 0

UI Startup Metrics (1299 ± 101 ms)

Platform	BuildType	Page	Metric	Test Title (ms)	Persona (ms)	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	0	-	-	-	-	-	-	-	-
			1	-	-	-	-	-	-	-	-
			2	-	-	-	-	-	-	-	-
			3	-	-	-	-	-	-	-	-
			4	-	-	-	-	-	-	-	-
			5	-	-	-	-	-	-	-	-
			6	-	-	-	-	-	-	-	-
			7	-	-	-	-	-	-	-	-
			8	-	-	-	-	-	-	-	-
			9	-	-	-	-	-	-	-	-
			10	-	-	-	-	-	-	-	-
			11	-	-	-	-	-	-	-	-
			12	-	-	-	-	-	-	-	-
			13	-	-	-	-	-	-	-	-
			14	-	-	-	-	-	-	-	-
			15	-	-	-	-	-	-	-	-
			16	-	-	-	-	-	-	-	-
			17	-	-	-	-	-	-	-	-
			18	-	-	-	-	-	-	-	-
			uiStartup	-	-	1299	1046	1594	101	1361	1450
			load	-	-	1084	882	1324	96	1151	1244
			domContentLoaded	-	-	1078	875	1315	95	1144	1230
			domInteractive	-	-	26	15	106	19	22	93
			firstPaint	-	-	150	67	1035	134	173	296
			backgroundConnect	-	-	216	196	262	11	221	240
			firstReactRender	-	-	15	10	34	5	17	27
			getState	-	-	35	14	127	13	37	56
			initialActions	-	-	1	0	5	1	1	3
			loadScripts	-	-	868	675	1119	94	933	1026
			setupStore	-	-	13	7	73	8	14	26
			numNetworkReqs	-	-	17	11	76	16	11	64
			19	-	-	-	-	-	-	-	-
	Browserify	Power User Home	0	-	-	-	-	-	-	-	-
			1	-	-	-	-	-	-	-	-
			2	-	-	-	-	-	-	-	-
			3	-	-	-	-	-	-	-	-
			4	-	-	-	-	-	-	-	-
			5	-	-	-	-	-	-	-	-
			6	-	-	-	-	-	-	-	-
			7	-	-	-	-	-	-	-	-
			8	-	-	-	-	-	-	-	-
			9	-	-	-	-	-	-	-	-
			10	-	-	-	-	-	-	-	-
			11	-	-	-	-	-	-	-	-
			12	-	-	-	-	-	-	-	-
			13	-	-	-	-	-	-	-	-
			14	-	-	-	-	-	-	-	-
			15	-	-	-	-	-	-	-	-
			16	-	-	-	-	-	-	-	-
			17	-	-	-	-	-	-	-	-
			18	-	-	-	-	-	-	-	-
			uiStartup	-	-	1860	1438	2484	172	1949	2228
			load	-	-	1023	906	1616	120	1054	1290
			domContentLoaded	-	-	1010	899	1599	120	1033	1278
			domInteractive	-	-	34	17	142	28	29	115
			firstPaint	-	-	195	68	1613	199	228	342
			backgroundConnect	-	-	281	206	721	134	237	615
			firstReactRender	-	-	22	15	59	7	22	38
			getState	-	-	175	127	754	64	185	228
			initialActions	-	-	1	0	4	1	1	2
			loadScripts	-	-	797	681	1385	119	818	1068
			setupStore	-	-	18	8	45	7	19	39
			numNetworkReqs	-	-	58	36	142	23	61	115
			19	-	-	-	-	-	-	-	-
Webpack	Standard Home	0	-	-	-	-	-	-	-	-
		1	-	-	-	-	-	-	-	-
		2	-	-	-	-	-	-	-	-
		3	-	-	-	-	-	-	-	-
		4	-	-	-	-	-	-	-	-
		5	-	-	-	-	-	-	-	-
		6	-	-	-	-	-	-	-	-
		7	-	-	-	-	-	-	-	-
		8	-	-	-	-	-	-	-	-
		9	-	-	-	-	-	-	-	-
		10	-	-	-	-	-	-	-	-
		11	-	-	-	-	-	-	-	-
		12	-	-	-	-	-	-	-	-
		13	-	-	-	-	-	-	-	-
		14	-	-	-	-	-	-	-	-
		15	-	-	-	-	-	-	-	-
		16	-	-	-	-	-	-	-	-
		17	-	-	-	-	-	-	-	-
		18	-	-	-	-	-	-	-	-
		uiStartup	-	-	816	666	1100	86	858	992
		load	-	-	661	583	859	74	700	815
		domContentLoaded	-	-	656	579	853	73	697	811
		domInteractive	-	-	26	15	102	21	22	91
		firstPaint	-	-	100	61	301	50	107	200
		backgroundConnect	-	-	20	5	116	22	28	89
		firstReactRender	-	-	17	11	34	5	18	27
		getState	-	-	35	16	144	17	44	62
		initialActions	-	-	1	0	5	1	1	2
		loadScripts	-	-	653	577	851	72	695	802
		setupStore	-	-	12	5	38	6	13	24
		numNetworkReqs	-	-	17	11	77	17	11	65
		19	-	-	-	-	-	-	-	-
Webpack	Power User Home	0	-	-	-	-	-	-	-	-
		1	-	-	-	-	-	-	-	-
		2	-	-	-	-	-	-	-	-
		3	-	-	-	-	-	-	-	-
		4	-	-	-	-	-	-	-	-
		5	-	-	-	-	-	-	-	-
		6	-	-	-	-	-	-	-	-
		7	-	-	-	-	-	-	-	-
		8	-	-	-	-	-	-	-	-
		9	-	-	-	-	-	-	-	-
		10	-	-	-	-	-	-	-	-
		11	-	-	-	-	-	-	-	-
		12	-	-	-	-	-	-	-	-
		13	-	-	-	-	-	-	-	-
		14	-	-	-	-	-	-	-	-
		15	-	-	-	-	-	-	-	-
		16	-	-	-	-	-	-	-	-
		17	-	-	-	-	-	-	-	-
		18	-	-	-	-	-	-	-	-
		uiStartup	-	-	1256	986	2111	247	1378	1911
		load	-	-	660	584	1050	83	678	848
		domContentLoaded	-	-	650	578	1046	84	665	842
		domInteractive	-	-	33	17	164	27	32	107
		firstPaint	-	-	127	62	321	65	169	252
		backgroundConnect	-	-	48	7	554	122	18	526
		firstReactRender	-	-	22	17	47	4	24	32
		getState	-	-	160	141	244	17	167	187
		initialActions	-	-	1	0	3	1	1	1
		loadScripts	-	-	648	576	1039	83	663	835
		setupStore	-	-	18	8	54	9	18	41
		numNetworkReqs	-	-	105	38	233	43	118	218
		19	-	-	-	-	-	-	-	-
Firefox	Browserify	Standard Home	0	-	-	-	-	-	-	-	-
			1	-	-	-	-	-	-	-	-
			2	-	-	-	-	-	-	-	-
			3	-	-	-	-	-	-	-	-
			4	-	-	-	-	-	-	-	-
			5	-	-	-	-	-	-	-	-
			6	-	-	-	-	-	-	-	-
			7	-	-	-	-	-	-	-	-
			8	-	-	-	-	-	-	-	-
			9	-	-	-	-	-	-	-	-
			10	-	-	-	-	-	-	-	-
			11	-	-	-	-	-	-	-	-
			12	-	-	-	-	-	-	-	-
			13	-	-	-	-	-	-	-	-
			14	-	-	-	-	-	-	-	-
			15	-	-	-	-	-	-	-	-
			16	-	-	-	-	-	-	-	-
			17	-	-	-	-	-	-	-	-
			18	-	-	-	-	-	-	-	-
			uiStartup	-	-	1455	1173	2133	189	1543	1868
			load	-	-	1166	986	1729	129	1230	1395
			domContentLoaded	-	-	1165	986	1729	130	1230	1395
			domInteractive	-	-	72	32	232	40	95	140
			firstPaint	-	-	-	-	-	-	-	-
			backgroundConnect	-	-	66	22	375	62	67	179
			firstReactRender	-	-	14	10	43	5	14	24
			getState	-	-	11	6	38	5	13	20
			initialActions	-	-	1	0	3	1	2	2
			loadScripts	-	-	1130	972	1682	120	1181	1358
			setupStore	-	-	18	5	227	29	13	54
			numNetworkReqs	-	-	18	9	77	17	13	70
			19	-	-	-	-	-	-	-	-
	Browserify	Power User Home	0	-	-	-	-	-	-	-	-
			1	-	-	-	-	-	-	-	-
			2	-	-	-	-	-	-	-	-
			3	-	-	-	-	-	-	-	-
			4	-	-	-	-	-	-	-	-
			5	-	-	-	-	-	-	-	-
			6	-	-	-	-	-	-	-	-
			7	-	-	-	-	-	-	-	-
			8	-	-	-	-	-	-	-	-
			9	-	-	-	-	-	-	-	-
			10	-	-	-	-	-	-	-	-
			11	-	-	-	-	-	-	-	-
			12	-	-	-	-	-	-	-	-
			13	-	-	-	-	-	-	-	-
			14	-	-	-	-	-	-	-	-
			15	-	-	-	-	-	-	-	-
			16	-	-	-	-	-	-	-	-
			17	-	-	-	-	-	-	-	-
			18	-	-	-	-	-	-	-	-
			uiStartup	-	-	2526	1890	5439	701	2489	4136
			load	-	-	1284	1006	2837	406	1214	2599
			domContentLoaded	-	-	1283	1006	2837	407	1213	2599
			domInteractive	-	-	110	36	515	88	110	356
			firstPaint	-	-	-	-	-	-	-	-
			backgroundConnect	-	-	134	25	1241	202	111	483
			firstReactRender	-	-	22	15	65	8	24	28
			getState	-	-	278	64	938	228	400	748
			initialActions	-	-	2	1	3	1	2	3
			loadScripts	-	-	1213	983	2623	335	1155	2057
			setupStore	-	-	121	11	744	168	99	611
			numNetworkReqs	-	-	52	30	102	21	78	90
			19	-	-	-	-	-	-	-	-
Webpack	Standard Home	0	-	-	-	-	-	-	-	-
		1	-	-	-	-	-	-	-	-
		2	-	-	-	-	-	-	-	-
		3	-	-	-	-	-	-	-	-
		4	-	-	-	-	-	-	-	-
		5	-	-	-	-	-	-	-	-
		6	-	-	-	-	-	-	-	-
		7	-	-	-	-	-	-	-	-
		8	-	-	-	-	-	-	-	-
		9	-	-	-	-	-	-	-	-
		10	-	-	-	-	-	-	-	-
		11	-	-	-	-	-	-	-	-
		12	-	-	-	-	-	-	-	-
		13	-	-	-	-	-	-	-	-
		14	-	-	-	-	-	-	-	-
		15	-	-	-	-	-	-	-	-
		16	-	-	-	-	-	-	-	-
		17	-	-	-	-	-	-	-	-
		18	-	-	-	-	-	-	-	-
		uiStartup	-	-	1526	1298	1932	143	1608	1805
		load	-	-	1300	1107	1618	103	1354	1505
		domContentLoaded	-	-	1300	1107	1618	103	1354	1505
		domInteractive	-	-	80	26	211	42	128	141
		firstPaint	-	-	-	-	-	-	-	-
		backgroundConnect	-	-	57	18	250	43	66	145
		firstReactRender	-	-	14	11	24	2	14	19
		getState	-	-	16	7	132	21	14	40
		initialActions	-	-	1	0	3	1	2	2
		loadScripts	-	-	1266	1094	1596	92	1311	1454
		setupStore	-	-	16	5	159	25	12	31
		numNetworkReqs	-	-	19	9	80	18	13	70
		19	-	-	-	-	-	-	-	-
Webpack	Power User Home	0	-	-	-	-	-	-	-	-
		1	-	-	-	-	-	-	-	-
		2	-	-	-	-	-	-	-	-
		3	-	-	-	-	-	-	-	-
		4	-	-	-	-	-	-	-	-
		5	-	-	-	-	-	-	-	-
		6	-	-	-	-	-	-	-	-
		7	-	-	-	-	-	-	-	-
		8	-	-	-	-	-	-	-	-
		9	-	-	-	-	-	-	-	-
		10	-	-	-	-	-	-	-	-
		11	-	-	-	-	-	-	-	-
		12	-	-	-	-	-	-	-	-
		13	-	-	-	-	-	-	-	-
		14	-	-	-	-	-	-	-	-
		15	-	-	-	-	-	-	-	-
		16	-	-	-	-	-	-	-	-
		17	-	-	-	-	-	-	-	-
		18	-	-	-	-	-	-	-	-
		uiStartup	-	-	2937	2165	7952	891	2979	4689
		load	-	-	1667	1222	6496	725	1665	3177
		domContentLoaded	-	-	1667	1221	6496	725	1664	3177
		domInteractive	-	-	106	28	694	90	111	302
		firstPaint	-	-	-	-	-	-	-	-
		backgroundConnect	-	-	194	22	1154	268	205	1025
		firstReactRender	-	-	24	17	141	13	25	30
		getState	-	-	284	73	856	225	471	749
		initialActions	-	-	2	0	34	3	2	3
		loadScripts	-	-	1577	1199	6321	657	1611	3023
		setupStore	-	-	89	11	754	132	82	380
		numNetworkReqs	-	-	51	30	94	19	73	84
		19	-	-	-	-	-	-	-	-

📊 Page Load Benchmark Results

Current Commit: 8e0b885 | Date: 1/21/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.04s (±38ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
domContentLoaded-> current mean value: 724ms (±34ms) 🟢 | historical mean value: 718ms ⬆️ (historical data)
firstContentfulPaint-> current mean value: 77ms (±13ms) 🟢 | historical mean value: 77ms ⬆️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.04s	38ms	1.01s	1.31s	1.07s	1.31s
domContentLoaded	724ms	34ms	700ms	977ms	751ms	977ms
firstPaint	77ms	13ms	60ms	192ms	84ms	192ms
firstContentfulPaint	77ms	13ms	60ms	192ms	84ms	192ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

Bundle size diffs

background: 58 Bytes (0%)
ui: 151 Bytes (0%)
common: 20 Bytes (0%)

fix: align additional networks info icon (MDP-668)

36bf15e

Co-authored-by: vince.howard <[email protected]>

vinnyhoward requested a review from a team as a code owner January 21, 2026 21:40

vinnyhoward temporarily deployed to pr-comment January 21, 2026 21:40 — with GitHub Actions Inactive

metamaskbot added the team-mobile-ux Mobile UX team label Jan 21, 2026

github-actions bot added the size-S label Jan 21, 2026

fix: update css and snaps

8e0b885

vinnyhoward temporarily deployed to pr-comment January 21, 2026 21:54 — with GitHub Actions Inactive

vinnyhoward changed the title ~~fix: align additional networks info icon (MDP-668)~~ fix: align additional networks info icon Jan 21, 2026

n3ps approved these changes Jan 21, 2026

View reviewed changes

vinnyhoward enabled auto-merge January 21, 2026 21:59

vinnyhoward temporarily deployed to pr-comment January 21, 2026 22:25 — with GitHub Actions Inactive

AndyMBridges approved these changes Jan 22, 2026

View reviewed changes

vinnyhoward added this pull request to the merge queue Jan 22, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 22, 2026

vinnyhoward added this pull request to the merge queue Jan 22, 2026

Merged via the queue into main with commit 0dd262c Jan 22, 2026
363 of 365 checks passed

vinnyhoward deleted the fix-mdp-668-network-menu-icon branch January 22, 2026 18:33

github-actions bot locked and limited conversation to collaborators Jan 22, 2026

metamaskbot added the release-13.16.0 Issue or pull request that will be included in release 13.16.0 label Jan 22, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: align additional networks info icon #39444

fix: align additional networks info icon #39444

vinnyhoward commented Jan 21, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

metamaskbotv2 bot commented Jan 21, 2026 •

edited

Loading

Uh oh!

metamaskbotv2 bot commented Jan 21, 2026

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fix: align additional networks info icon #39444

fix: align additional networks info icon #39444

Conversation

vinnyhoward commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

metamaskbotv2 bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ Files requiring CODEOWNER review ✨

Uh oh!

metamaskbotv2 bot commented Jan 21, 2026

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vinnyhoward commented Jan 21, 2026 •

edited

Loading

metamaskbotv2 bot commented Jan 21, 2026 •

edited

Loading