chore: bridge tx detail layout fix and unit tests

[micaelae]

Description

Replaces the hardcoded widths for the tx detail modal's columns, which was causing labels to wrap. Also adding unit test coverage for bridge transaction details component

Related issues

Fixes:

Manual testing steps

1. View a Bridge tx
2. verify that tx detail labels don't wrap to the next line

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.

[metamaskbot]

✨ Files requiring CODEOWNER review ✨

🔄 @MetaMask/swaps-engineers (3 files, +735 -4)

• 📁 test/
  • 📁 data/
    • 📁 bridge/
      • 📄 mock-bridge-transaction-details.json +475 -0
• 📁 ui/
  • 📁 pages/
    • 📁 bridge/
      • 📁 transaction-details/
        • 📄 transaction-detail-row.tsx +9 -3
        • 📄 transaction-details.test.tsx +251 -1

[metamaskbot]

Builds ready [d4eb2f2]

• builds: chrome, firefox
• builds (beta): chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1219 ± 55 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1219	1121	1404	55	1255	1306
			load	1054	959	1243	53	1088	1131
			domContentLoaded	1047	952	1239	53	1081	1124
			domInteractive	18	14	72	8	17	37
			firstPaint	707	81	1211	418	1078	1116
			backgroundConnect	7	4	26	4	7	11
			firstReactRender	21	17	42	4	21	30
			getState	14	6	31	7	20	28
			initialActions	0	0	1	0	0	1
			loadScripts	800	710	976	51	830	878
			setupStore	8	5	26	3	8	17
	Webpack	Home	uiStartup	2177	1658	2678	223	2311	2598
			load	1660	1264	2151	192	1769	1991
			domContentLoaded	1654	1256	2146	192	1761	1987
			domInteractive	19	10	116	19	14	72
			firstPaint	164	62	567	71	182	299
			backgroundConnect	20	10	41	6	23	31
			firstReactRender	245	90	468	123	383	413
			getState	11	4	42	7	12	27
			initialActions	3	1	5	1	3	4
			loadScripts	1651	1254	2135	190	1760	1977
			setupStore	21	7	316	43	18	29
Firefox	Browserify	Home	uiStartup	1356	1198	1716	112	1396	1631
			load	1194	1068	1545	88	1225	1386
			domContentLoaded	1194	1068	1545	88	1224	1385
			domInteractive	107	36	504	56	119	163
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	119	12	21	36
			firstReactRender	24	21	35	3	24	31
			getState	10	5	89	13	9	24
			initialActions	0	0	1	0	0	1
			loadScripts	1175	1051	1463	83	1205	1363
			setupStore	8	4	80	9	7	24
	Webpack	Home	uiStartup	1593	1374	2147	156	1675	1950
			load	1379	1198	1786	132	1470	1634
			domContentLoaded	1378	1197	1786	132	1469	1633
			domInteractive	96	31	482	67	91	286
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	15	44	5	22	33
			firstReactRender	42	33	50	4	44	49
			getState	11	7	45	6	11	25
			initialActions	0	0	2	1	1	1
			loadScripts	1360	1179	1767	132	1451	1609
			setupStore	8	5	36	4	8	17

Benchmark value 245 exceeds gate value 235 for chrome webpack home mean firstReactRender
Benchmark value 2598 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 72 exceeds gate value 57 for chrome webpack home p95 domInteractive
Benchmark value 413 exceeds gate value 370 for chrome webpack home p95 firstReactRender
Benchmark value 1977 exceeds gate value 1970 for chrome webpack home p95 loadScripts
Benchmark value 42 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1361 exceeds gate value 1360 for firefox webpack home mean loadScripts
Benchmark value 1950 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 286 exceeds gate value 156 for firefox webpack home p95 domInteractive
Sum of mean exceeds: 15ms | Sum of p95 exceeds: 354ms
Sum of all benchmark exceeds: 369ms

Bundle size diffs

• background: 0 Bytes (0%)
• ui: 65 Bytes (0%)
• common: 0 Bytes (0%)

[metamaskbot]

Builds ready [6e3d43c]

• builds: chrome, firefox
• builds (beta): chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1185 ± 75 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1185	1081	1630	75	1224	1292
			load	1019	882	1410	75	1070	1117
			domContentLoaded	1013	878	1406	75	1064	1110
			domInteractive	17	13	65	7	16	36
			firstPaint	616	143	1154	400	1023	1107
			backgroundConnect	7	4	25	3	7	9
			firstReactRender	22	17	133	12	21	31
			getState	13	6	32	7	19	27
			initialActions	0	0	1	0	0	1
			loadScripts	809	675	1197	74	857	905
			setupStore	9	5	25	4	8	22
	Webpack	Home	uiStartup	2182	1652	2667	195	2273	2561
			load	1657	1240	2029	168	1719	1951
			domContentLoaded	1651	1236	2019	167	1715	1945
			domInteractive	17	11	76	14	14	60
			firstPaint	162	66	714	75	177	274
			backgroundConnect	20	10	36	6	23	33
			firstReactRender	265	88	440	121	385	405
			getState	11	5	32	5	13	19
			initialActions	3	1	6	1	3	4
			loadScripts	1649	1234	2009	165	1714	1944
			setupStore	16	7	158	15	18	24
Firefox	Browserify	Home	uiStartup	1416	1226	1781	111	1468	1652
			load	1241	1082	1531	87	1296	1399
			domContentLoaded	1241	1082	1531	87	1296	1399
			domInteractive	115	35	345	42	131	177
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	13	140	17	22	53
			firstReactRender	25	21	57	4	25	30
			getState	11	4	105	13	9	29
			initialActions	0	0	1	0	0	1
			loadScripts	1222	1063	1507	86	1274	1386
			setupStore	9	4	99	13	7	21
	Webpack	Home	uiStartup	1579	1391	2050	163	1674	1949
			load	1360	1196	1767	134	1469	1634
			domContentLoaded	1359	1195	1767	134	1469	1633
			domInteractive	88	33	352	54	85	262
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	15	53	6	23	32
			firstReactRender	41	33	51	4	44	47
			getState	14	7	56	9	13	35
			initialActions	1	0	1	1	1	1
			loadScripts	1341	1172	1749	134	1452	1608
			setupStore	10	5	113	12	8	28

Benchmark value 22 exceeds gate value 17 for chrome browserify home p95 setupStore
Benchmark value 266 exceeds gate value 235 for chrome webpack home mean firstReactRender
Benchmark value 2562 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 61 exceeds gate value 57 for chrome webpack home p95 domInteractive
Benchmark value 405 exceeds gate value 370 for chrome webpack home p95 firstReactRender
Benchmark value 1417 exceeds gate value 1405 for firefox browserify home mean uiStartup
Benchmark value 1241 exceeds gate value 1239 for firefox browserify home mean domContentLoaded
Benchmark value 115 exceeds gate value 110 for firefox browserify home mean domInteractive
Benchmark value 26 exceeds gate value 25 for firefox browserify home mean firstReactRender
Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 29 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1949 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 262 exceeds gate value 156 for firefox webpack home p95 domInteractive
Benchmark value 35 exceeds gate value 32 for firefox webpack home p95 getState
Sum of mean exceeds: 55ms | Sum of p95 exceeds: 280ms
Sum of all benchmark exceeds: 335ms

Bundle size diffs

• background: 0 Bytes (0%)
• ui: 65 Bytes (0%)
• common: 0 Bytes (0%)