fix(snaps): Ensure that adjacent form elements take up to 50% width

[david0xd]

Description

Add some SCSS changes to ensure that adjacent form elements take up to 50% width in Snaps custom UI.

Related issues

Fixes: MetaMask/snaps#2948

Manual testing steps

1. Install a Snap with custom UI with adjacent form elements like in the example code provided.
2. Make sure that adjacent form elements take up to 50% of the space available.

Snaps JSX used for testing:

            <Container>
              <Form name="form">
                <Box direction="horizontal">
                  <Field label="baz">
                    <Input name="baz" placeholder="Enter something..." />
                  </Field>
                  <Field label="foo">
                    <Selector title="bar" name="test">
                      <SelectorOption value="one">
                        <Card title="test" value="test" />
                      </SelectorOption>
                    </Selector>
                  </Field>
                </Box>
                <Field label="something_else">
                  <Selector title="bar" name="test2">
                    <SelectorOption value="one">
                      <Card title="test" value="test" />
                    </SelectorOption>
                  </Selector>
                </Field>
                <Box direction="horizontal">
                  <Field label="baz2">
                    <Input name="baz2" placeholder="Enter something..." />
                  </Field>
                  <Field label="foo3">
                    <Input name="foo3" placeholder="Enter something..." />
                  </Field>
                </Box>
                <Box direction="horizontal">
                  <Field label="Example Dropdown">
                    <Dropdown name="example-dropdown">
                      <Option value="option1">Option 1</Option>
                      <Option value="option2">Option 2</Option>
                      <Option value="option3">Option 3</Option>
                    </Dropdown>
                  </Field>
                  <Field label="Example RadioGroup">
                    <RadioGroup name="example-radiogroup">
                      <Radio value="option1">Option 1</Radio>
                      <Radio value="option2">Option 2</Radio>
                      <Radio value="option3">Option 3</Radio>
                    </RadioGroup>
                  </Field>
                </Box>
                <Field label="Example Dropdown full width">
                  <Dropdown name="example-dropdown-full">
                    <Option value="option1">Option 1</Option>
                    <Option value="option2">Option 2</Option>
                    <Option value="option3">Option 3</Option>
                  </Dropdown>
                </Field>
                <Field label="Example RadioGroup full width">
                  <RadioGroup name="example-radiogroup-full">
                    <Radio value="option11">Option 11</Radio>
                    <Radio value="option22">Option 22</Radio>
                    <Radio value="option33">Option 33</Radio>
                  </RadioGroup>
                </Field>
                <Field label="foo4">
                  <Input name="foo4" placeholder="Enter something..." />
                </Field>
                <Box direction="horizontal">
                  <Field label="baz3">
                    <Input name="baz3" placeholder="Enter something..." />
                  </Field>
                </Box>
                <Box direction="horizontal">
                  <Field label="Example Checkbox">
                    <Checkbox name="example-checkbox" label="Checkbox" />
                  </Field>
                  <Field label="Example Selector">
                    <Selector
                      name="example-selector"
                      title="Choose an option"
                      value="option1"
                    >
                      <SelectorOption value="option1">
                        <Card title="Option 1" value="option1" />
                      </SelectorOption>
                      <SelectorOption value="option2">
                        <Card title="Option 2" value="option2" />
                      </SelectorOption>
                      <SelectorOption value="option3">
                        <Card title="Option 3" value="option3" />
                      </SelectorOption>
                    </Selector>
                  </Field>
                </Box>
                <Field label="Example Checkbox Full field">
                  <Checkbox name="example-checkbox-full" label="Checkbox" />
                </Field>
                <Box direction="horizontal">
                  <Field label="baz4">
                    <Input name="baz4" placeholder="Enter something..." />
                  </Field>
                  <Field label="Example FileInput">
                    <FileInput name="file-input-1" />
                  </Field>
                </Box>
                <Field label="Example FileInput 2">
                  <FileInput name="file-input-2" />
                </Field>
                <Box direction="horizontal">
                  <Field label="baz5">
                    <Input name="baz5" placeholder="Enter something..." />
                  </Field>
                  <Field label="FileInput Compact">
                    <FileInput name="file-input-3" compact={true} />
                  </Field>
                </Box>
                <Field label="FileInput Compact 2 full">
                  <FileInput name="file-input-4" compact={true} />
                </Field>
              </Form>
            </Container>

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.

[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 [be54210]

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

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

Page Load Metrics (1513 ± 49 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	257	1756	1469	299	143
		domContentLoaded	1379	1704	1491	99	47
		load	1387	1716	1513	103	49
		domInteractive	20	173	39	33	16
		backgroundConnect	8	61	23	18	9
		firstReactRender	15	103	33	27	13
		getState	4	84	23	23	11
		initialActions	0	1	0	0	0
		loadScripts	998	1267	1111	82	39
		setupStore	6	75	17	19	9
		uiStartup	1541	2424	1767	232	111

[metamaskbot]

Builds ready [58cb939]

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

Page Load Metrics (1646 ± 76 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	516	2160	1596	294	141
		domContentLoaded	1322	2112	1622	155	75
		load	1331	2161	1646	159	76
		domInteractive	14	95	41	20	10
		backgroundConnect	9	57	27	17	8
		firstReactRender	16	74	31	22	11
		getState	5	52	14	15	7
		initialActions	0	1	0	0	0
		loadScripts	953	1695	1212	145	69
		setupStore	6	86	16	21	10
		uiStartup	1598	2371	1889	190	91

[metamaskbot]

Builds ready [16abe03]

• 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, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1653 ± 69 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	303	2018	1600	329	158
		domContentLoaded	1379	1993	1622	140	67
		load	1434	2007	1653	143	69
		domInteractive	25	155	48	30	15
		backgroundConnect	7	118	32	28	13
		firstReactRender	15	77	35	23	11
		getState	4	46	10	9	4
		initialActions	0	1	0	0	0
		loadScripts	997	1618	1231	134	65
		setupStore	6	71	15	18	9
		uiStartup	1604	2299	1874	175	84

[metamaskbot]

Builds ready [3838321]

• 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, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1904 ± 146 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	248	2437	1549	617	296
		domContentLoaded	1543	2701	1888	301	145
		load	1575	2723	1904	305	146
		domInteractive	26	98	50	22	11
		backgroundConnect	9	60	22	15	7
		firstReactRender	16	73	36	21	10
		getState	4	54	14	14	7
		initialActions	0	0	0	0	0
		loadScripts	1104	2136	1404	258	124
		setupStore	7	69	29	23	11
		uiStartup	1819	3168	2190	353	169