fix: layout inconsistencies - snaps #38534

n3ps · 2025-12-03T20:20:43Z

Description

Fix layout inconsistencies in snaps pages in fullscreen and sidepanel

Changelog

CHANGELOG entry: fix: layout inconsistencies

Related issues

Fixes:

Manual testing steps

Go to this page...

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.

Note

Switch snaps routes to RootLayout and update snaps list to full-height with simplified responsive styling.

Routes:
- Switch SNAPS_ROUTE and SNAPS_VIEW_ROUTE to RootLayout (from LegacyLayout).
Snaps List UI:
- Add h-full to container for full-height layout in snaps-list/snap-list.js.
- Simplify responsive widths in snaps-list/index.scss by removing breakpoint-specific width overrides; keep full-width with overflow prevention.

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

github-actions · 2025-12-03T20:20:54Z

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.

metamaskbot · 2025-12-03T20:21:23Z

✨ Files requiring CODEOWNER review ✨

🫰 @MetaMask/core-platform (2 files, +1 -16)

📁 ui/
- 📁 pages/
  - 📁 snaps/
    - 📁 snaps-list/
      - 📄 index.scss +0 -15
      - 📄 snap-list.js +1 -1

n3ps · 2025-12-03T20:23:35Z

ui/pages/snaps/snaps-list/index.scss

    height: $height-screen-sm-max;
  }

-  @include design-system.screen-sm-min {


Let the layout handle widths

metamaskbot · 2025-12-03T20:56:28Z

Builds ready [1bf6a99]

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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1283 ± 111 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1283	1083	1638	111	1356	1465
			load	1065	880	1410	101	1127	1236
			domContentLoaded	1059	875	1378	100	1121	1232
			domInteractive	27	16	161	23	23	87
			firstPaint	558	85	1397	433	1071	1218
			backgroundConnect	223	202	270	11	228	246
			firstReactRender	30	19	61	9	32	55
			getState	38	15	159	23	43	90
			initialActions	1	0	11	1	1	2
			loadScripts	841	672	1153	98	897	1018
			setupStore	11	6	21	3	12	19
			numNetworkReqs	10	5	66	16	5	60
	Browserify	Power User Home	uiStartup	1964	1652	2753	215	2092	2359
			load	1020	885	1895	146	1061	1272
			domContentLoaded	1009	877	1888	146	1047	1262
			domInteractive	32	16	119	23	29	104
			firstPaint	505	92	1279	371	927	1220
			backgroundConnect	260	201	775	128	224	672
			firstReactRender	51	40	80	8	55	68
			getState	185	140	273	28	203	247
			initialActions	1	0	4	1	1	2
			loadScripts	801	679	1671	143	842	1052
			setupStore	16	7	46	8	16	39
			numNetworkReqs	77	61	221	24	73	143
	Webpack	Standard Home	uiStartup	832	708	1019	72	862	996
			load	643	572	836	65	670	797
			domContentLoaded	639	567	830	65	667	792
			domInteractive	28	15	147	25	24	105
			firstPaint	200	78	837	132	192	589
			backgroundConnect	11	6	88	11	11	27
			firstReactRender	29	20	109	13	33	40
			getState	27	11	67	12	36	50
			initialActions	1	0	4	1	1	2
			loadScripts	636	565	821	64	665	782
			setupStore	11	6	29	4	12	21
			numNetworkReqs	11	5	70	17	5	63
	Webpack	Power User Home	uiStartup	1678	1289	2260	261	1880	2144
			load	701	603	1092	104	731	947
			domContentLoaded	693	596	1085	104	721	941
			domInteractive	35	18	136	25	33	104
			firstPaint	287	87	935	194	318	723
			backgroundConnect	116	8	667	195	107	573
			firstReactRender	62	45	116	11	65	84
			getState	179	143	274	21	191	214
			initialActions	1	0	3	1	1	2
			loadScripts	690	594	1074	102	719	932
			setupStore	19	10	93	13	17	52
			numNetworkReqs	78	62	216	27	72	151
Firefox	Browserify	Standard Home	uiStartup	1308	1067	1662	136	1393	1608
			load	1077	913	1370	89	1144	1224
			domContentLoaded	1076	913	1369	90	1144	1223
			domInteractive	56	31	145	28	82	113
			firstPaint	-	-	-	-	-	-
			backgroundConnect	47	19	205	31	57	116
			firstReactRender	23	18	55	6	24	33
			getState	12	6	137	15	10	21
			initialActions	1	0	3	1	2	2
			loadScripts	1046	898	1278	76	1106	1167
			setupStore	16	5	227	27	10	52
			numNetworkReqs	12	5	62	16	6	62
	Browserify	Power User Home	uiStartup	2969	1811	4766	869	3862	4477
			load	1331	942	2573	462	1379	2390
			domContentLoaded	1330	941	2572	462	1379	2390
			domInteractive	97	32	472	73	97	276
			firstPaint	-	-	-	-	-	-
			backgroundConnect	293	21	1220	391	332	1161
			firstReactRender	62	36	202	29	74	135
			getState	281	83	1162	256	327	887
			initialActions	2	0	7	1	2	3
			loadScripts	1149	928	2232	222	1191	1464
			setupStore	134	6	930	203	106	652
			numNetworkReqs	76	51	133	21	72	125
	Webpack	Standard Home	uiStartup	1543	1272	2019	156	1619	1875
			load	1270	1080	1648	105	1331	1465
			domContentLoaded	1270	1080	1647	105	1328	1465
			domInteractive	62	27	234	37	84	139
			firstPaint	-	-	-	-	-	-
			backgroundConnect	52	20	211	36	52	145
			firstReactRender	28	21	69	8	30	39
			getState	16	7	202	25	14	50
			initialActions	1	0	3	1	2	2
			loadScripts	1240	1066	1511	96	1301	1419
			setupStore	14	6	85	13	15	37
			numNetworkReqs	12	5	67	17	7	64
	Webpack	Power User Home	uiStartup	3296	2065	6705	1039	4163	5180
			load	1724	1111	5026	716	2319	2734
			domContentLoaded	1724	1111	5026	716	2318	2734
			domInteractive	203	30	3476	503	134	977
			firstPaint	-	-	-	-	-	-
			backgroundConnect	257	22	1316	348	236	1131
			firstReactRender	66	39	334	42	63	175
			getState	308	86	1349	265	415	819
			initialActions	3	0	79	8	2	7
			loadScripts	1596	1093	5010	661	1615	2686
			setupStore	95	5	797	140	97	442
			numNetworkReqs	77	58	140	21	71	127

📊 Page Load Benchmark Results

Current Commit: 1bf6a99 | Date: 12/3/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.03s (±37ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
domContentLoaded-> current mean value: 719ms (±35ms) 🟢 | historical mean value: 724ms ⬇️ (historical data)
firstContentfulPaint-> current mean value: 76ms (±12ms) 🟢 | historical mean value: 77ms ⬇️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.03s	37ms	1.01s	1.31s	1.05s	1.31s
domContentLoaded	719ms	35ms	694ms	979ms	736ms	979ms
firstPaint	76ms	12ms	56ms	176ms	88ms	176ms
firstContentfulPaint	76ms	12ms	56ms	176ms	88ms	176ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

Bundle size diffs [🚨 Warning! Bundle size has increased!]

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

metamaskbot · 2025-12-04T15:01:50Z

Builds ready [307ee60]

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
- content-script: 0
- offscreen: 0

UI Startup Metrics (1261 ± 103 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1261	1031	1658	103	1315	1419
			load	1050	891	1388	90	1100	1218
			domContentLoaded	1044	886	1383	89	1094	1207
			domInteractive	29	15	191	28	22	99
			firstPaint	504	83	1395	404	1022	1167
			backgroundConnect	222	203	259	12	230	246
			firstReactRender	31	19	66	10	36	55
			getState	36	16	106	15	42	65
			initialActions	1	0	5	1	1	2
			loadScripts	827	675	1168	88	876	989
			setupStore	11	7	30	4	12	20
			numNetworkReqs	10	5	72	16	5	59
	Browserify	Power User Home	uiStartup	2053	1713	2692	247	2275	2542
			load	1050	893	1622	148	1099	1402
			domContentLoaded	1038	886	1615	148	1088	1395
			domInteractive	35	17	267	35	31	93
			firstPaint	539	98	1433	402	964	1241
			backgroundConnect	270	202	761	133	241	636
			firstReactRender	52	40	76	7	56	64
			getState	197	148	744	79	202	304
			initialActions	1	0	4	1	1	2
			loadScripts	825	687	1388	141	851	1179
			setupStore	16	7	41	5	16	31
			numNetworkReqs	80	64	241	28	75	148
	Webpack	Standard Home	uiStartup	804	693	1058	75	827	978
			load	625	556	832	63	642	779
			domContentLoaded	621	550	822	62	638	776
			domInteractive	26	15	103	20	22	90
			firstPaint	228	82	804	154	223	632
			backgroundConnect	10	6	55	7	13	26
			firstReactRender	27	20	56	6	31	39
			getState	27	13	98	14	35	50
			initialActions	1	0	2	1	1	2
			loadScripts	618	548	813	61	636	775
			setupStore	11	6	35	5	12	21
			numNetworkReqs	11	5	71	17	5	60
	Webpack	Power User Home	uiStartup	1571	1222	2422	249	1683	2086
			load	674	574	1186	96	697	879
			domContentLoaded	666	568	1177	96	686	872
			domInteractive	33	18	153	27	30	119
			firstPaint	265	92	760	172	281	653
			backgroundConnect	89	7	601	174	37	562
			firstReactRender	58	46	97	10	64	76
			getState	188	142	723	76	187	245
			initialActions	1	0	3	1	1	2
			loadScripts	663	566	1162	94	684	864
			setupStore	17	8	44	8	16	40
			numNetworkReqs	79	63	250	29	74	152
Firefox	Browserify	Standard Home	uiStartup	1351	1066	1875	177	1459	1694
			load	1111	920	1534	128	1185	1387
			domContentLoaded	1111	920	1533	128	1184	1387
			domInteractive	63	30	241	38	86	131
			firstPaint	-	-	-	-	-	-
			backgroundConnect	49	21	172	32	63	118
			firstReactRender	23	18	38	4	24	34
			getState	13	7	99	16	11	65
			initialActions	1	0	3	1	2	2
			loadScripts	1080	905	1487	115	1152	1359
			setupStore	13	5	201	21	11	29
			numNetworkReqs	12	5	67	16	7	62
	Browserify	Power User Home	uiStartup	3029	1855	4952	846	3809	4700
			load	1384	1014	2764	467	1370	2604
			domContentLoaded	1383	1014	2763	467	1370	2597
			domInteractive	117	33	940	116	113	320
			firstPaint	-	-	-	-	-	-
			backgroundConnect	295	29	1606	388	384	1203
			firstReactRender	66	34	269	35	69	134
			getState	328	71	1130	271	447	888
			initialActions	4	1	74	10	2	7
			loadScripts	1266	995	2576	343	1309	2316
			setupStore	108	5	770	164	94	621
			numNetworkReqs	77	51	149	24	71	135
	Webpack	Standard Home	uiStartup	1466	1248	1903	136	1547	1771
			load	1213	1060	1519	97	1289	1386
			domContentLoaded	1212	1060	1519	97	1288	1386
			domInteractive	57	27	282	39	82	114
			firstPaint	-	-	-	-	-	-
			backgroundConnect	44	19	141	24	44	110
			firstReactRender	27	20	77	9	30	39
			getState	14	6	192	21	12	44
			initialActions	1	0	3	0	1	2
			loadScripts	1188	1043	1493	91	1263	1338
			setupStore	13	6	140	17	11	35
			numNetworkReqs	12	5	65	17	7	62
	Webpack	Power User Home	uiStartup	3265	2311	6029	892	4127	4852
			load	1652	1179	3014	527	2144	2767
			domContentLoaded	1651	1178	3014	527	2143	2766
			domInteractive	123	32	1164	193	100	366
			firstPaint	-	-	-	-	-	-
			backgroundConnect	278	29	1234	364	292	1177
			firstReactRender	72	39	244	40	72	184
			getState	353	81	1101	294	560	942
			initialActions	3	1	77	10	2	3
			loadScripts	1504	1147	2873	408	1564	2452
			setupStore	144	4	1155	217	132	717
			numNetworkReqs	78	60	146	22	73	124

📊 Page Load Benchmark Results

Current Commit: 307ee60 | Date: 12/4/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.03s (±45ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
domContentLoaded-> current mean value: 719ms (±65ms) 🟢 | historical mean value: 727ms ⬇️ (historical data)
firstContentfulPaint-> current mean value: 88ms (±131ms) 🟢 | historical mean value: 80ms ⬆️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.03s	45ms	1.00s	1.39s	1.05s	1.39s
domContentLoaded	719ms	65ms	696ms	1.32s	734ms	1.32s
firstPaint	88ms	131ms	60ms	1.39s	88ms	1.39s
firstContentfulPaint	88ms	131ms	60ms	1.39s	88ms	1.39s
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

Bundle size diffs [🚨 Warning! Bundle size has increased!]

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

snaps

763ef57

n3ps requested a review from a team as a code owner December 3, 2025 20:20

n3ps added the team-core-extension-ux Core Extension UX team label Dec 3, 2025

more

76a672a

github-actions bot added the size-XS label Dec 3, 2025

cleanup

1bf6a99

n3ps commented Dec 3, 2025

View reviewed changes

github-actions bot added size-S and removed size-XS labels Dec 3, 2025

Merge branch 'main' into n3ps/layout-polish-snaps

307ee60

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: layout inconsistencies - snaps #38534

fix: layout inconsistencies - snaps #38534

n3ps commented Dec 3, 2025 •

edited by cursor bot

Loading

Uh oh!

github-actions bot commented Dec 3, 2025

Uh oh!

metamaskbot commented Dec 3, 2025 •

edited

Loading

Uh oh!

n3ps Dec 3, 2025

Uh oh!

metamaskbot commented Dec 3, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

metamaskbot commented Dec 4, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: layout inconsistencies - snaps #38534

Are you sure you want to change the base?

fix: layout inconsistencies - snaps #38534

Conversation

n3ps commented Dec 3, 2025 • edited by cursor bot 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 Dec 3, 2025

Uh oh!

metamaskbot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ Files requiring CODEOWNER review ✨

Uh oh!

n3ps Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

metamaskbot commented Dec 3, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

metamaskbot commented Dec 4, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

n3ps commented Dec 3, 2025 •

edited by cursor bot

Loading

metamaskbot commented Dec 3, 2025 •

edited

Loading