fix: Improve Snaps UI spacing rules

[FrederikBolding]

Description

Improves the Snaps UI spacing by using a larger gap for the root element and lets fields divide space 50/50 between each other.

Manual testing steps

import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
import {
  Box,
  Container,
  Form,
  Input,
  Field,
  Dropdown,
  RadioGroup,
  Radio,
  Checkbox,
  Selector,
  SelectorOption,
  Option,
  Card,
  FileInput,
  Banner,
  Text,
} from '@metamask/snaps-sdk/jsx';

/**
 * Handle incoming JSON-RPC requests, sent through `wallet_invokeSnap`.
 *
 * @param args - The request handler args as object.
 * @param args.request - A validated JSON-RPC request object.
 * @returns The result of `snap_dialog`.
 * @throws If the request method is not valid for this snap.
 */
export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Container backgroundColor="default">
              <Box>
                <Form name="form">
                  <Field label="baz">
                    <Input
                      name="baz"
                      placeholder="Enter something..."
                      disabled={true}
                    />
                  </Field>
                  <Box direction="horizontal">
                    <Field label="baz2">
                      <Input
                        name="baz2"
                        placeholder="Enter something..."
                        type="number"
                        disabled={true}
                      />
                    </Field>
                    <Field label="foo3">
                      <Input
                        name="foo3"
                        placeholder="Enter something..."
                        type="password"
                        disabled={true}
                      />
                    </Field>
                  </Box>
                  <Box direction="horizontal">
                    <Field label="Example Checkbox">
                      <Checkbox
                        name="example-checkbox"
                        label="Checkbox"
                        checked={true}
                        disabled={true}
                      />
                    </Field>
                    <Field label="Example Checkbox">
                      <Checkbox
                        name="example-checkbox-toggle"
                        label="Checkbox"
                        checked={true}
                        variant="toggle"
                        disabled={true}
                      />
                    </Field>
                  </Box>
                  <Box direction="horizontal">
                    <Field label="Example Checkbox 3">
                      <Checkbox
                        name="example-checkbox-3"
                        label="Checkbox"
                        disabled={true}
                      />
                    </Field>
                    <Field label="Example Checkbox 4">
                      <Checkbox
                        name="example-checkbox-4"
                        label="Checkbox"
                        disabled={true}
                        variant="toggle"
                      />
                    </Field>
                  </Box>
                  <Field label="Example Selector">
                    <Selector
                      name="example-selector"
                      title="Choose an option"
                      value="option1"
                      disabled={true}
                    >
                      <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>
                  <Field label="Example Selector 2">
                    <Selector
                      name="example-selector-2"
                      title="Choose an option"
                      value="option1"
                      disabled={false}
                    >
                      <SelectorOption value="option1">
                        <Card title="Option 1" value="option1" />
                      </SelectorOption>
                      <SelectorOption value="option2" disabled={true}>
                        <Card title="Option 2" value="option2" />
                      </SelectorOption>
                      <SelectorOption value="option3">
                        <Card title="Option 3" value="option3" />
                      </SelectorOption>
                    </Selector>
                  </Field>
                </Form>
              </Box>
            </Container>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};

Screenshots/Recordings

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: bb6b0b0
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/617affc2-cd94-4fa7-a297-9866bc5da4f6

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request