fix: Snap Section component overflow

[hmalik88]

Description

Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions:

1. What is the reason for the change? Text inside a section component does not wrap and instead overflows.
2. What is the improvement/solution? Make sure flex-wrap: wrap is applied to the section (box) component and that each text component has horizontal space with flex: 1.

Related issues

Fixes: #29876

Manual testing steps

1. Pull down this branch and build the extension.
2. Trigger custom ui content with the example code in the issue above.
3. Observe the fix.

Screenshots/Recordings

Before

See issue

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.

[github-actions]

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]

Builds ready [bfbce8e]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1697 ± 111 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	392	2310	1639	364	175
		domContentLoaded	1417	2290	1678	221	106
		load	1421	2321	1697	231	111
		domInteractive	23	99	44	22	11
		backgroundConnect	7	51	21	15	7
		firstReactRender	15	98	38	25	12
		getState	4	75	18	21	10
		initialActions	0	0	0	0	0
		loadScripts	1007	1570	1217	156	75
		setupStore	5	84	15	21	10
		uiStartup	1644	2712	1959	304	146

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 40 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [941fb9e]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1733 ± 62 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	304	2059	1664	333	160
		domContentLoaded	1523	2016	1704	112	54
		load	1546	2068	1733	130	62
		domInteractive	23	101	38	19	9
		backgroundConnect	10	87	29	21	10
		firstReactRender	17	101	40	28	14
		getState	5	78	22	22	10
		initialActions	0	1	0	0	0
		loadScripts	1047	1527	1246	106	51
		setupStore	6	86	19	23	11
		uiStartup	1816	2681	2055	221	106

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 40 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[hjetpoluru]

Tested the changes locally and working as expected and code LGTM!

[FrederikBolding]

Both this change and the flex change will have impact beyond the overflow we are trying to fix here.

Have you tested existing Snap UI's to make sure this doesn't cause regressions in behavior?

[hmalik88]

Yeah I tested it with the box being vertical and behavior was unchanged. If you're talking about regressions across all existing snap interfaces (examples and production snaps), no -- that's a lot to check. This and other work has made me think if we should have some service that checks for regressions programmatically, realistically any UI change can break an existing snap interface.

[metamaskbot]

Builds ready [1daff52]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1735 ± 72 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	227	1951	1604	474	228
		domContentLoaded	1465	1931	1706	143	69
		load	1469	1970	1735	150	72
		domInteractive	26	78	37	15	7
		backgroundConnect	8	97	29	25	12
		firstReactRender	15	80	37	24	12
		getState	4	53	12	13	6
		initialActions	0	0	0	0	0
		loadScripts	1042	1433	1223	122	59
		setupStore	7	60	21	20	10
		uiStartup	1698	2316	2007	178	86

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 40 Bytes (0.00%)
• common: 0 Bytes (0.00%)