[patterns] add dividers and tighten spacing on app-settings-layout-example (#8625)

### WHY are these changes introduced?

App settings layout pattern wasn't conforming with designs or layout
usage. This PR resolves this.

### WHAT is this pull request doing?
* Adds a divider between each settings group.
* Reduce gap from 16 to 4 for `sm` breakpoint and above. 
* Reduce gap from 16 to 8 for `xs` breakpoint and above. 

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: gwyneplaine

polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md

@@ -29,69 +29,75 @@ This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stac
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
 <div style={{ paddingBottom: '2rem' }}>
-  ____CODE____
+  {(____CODE____)()}
 </div>
 ```
 
 ```javascript {"type":"livePreview","id":"example"}
-<Page
-  divider
-  primaryAction={{content: 'View on your store', disabled: true}}
-  secondaryActions={[
-    {
-      content: 'Duplicate',
-      accessibilityLabel: 'Secondary action label',
-      onAction: () => alert('Duplicate action'),
-    },
-  ]}
->
-  <AlphaStack gap="16" align="center">
-    <Columns columns={{xs: '1fr', md: '2fr 5fr'}} gap="4">
-      <Box
-        as="section"
-        paddingInlineStart={{xs: 4, sm: 0}}
-        paddingInlineEnd={{xs: 4, sm: 0}}
-      >
-        <AlphaStack gap="4">
-          <Text as="h3" variant="headingMd">
-            InterJambs
-          </Text>
-          <Text as="p" variant="bodyMd">
-            Interjambs are the rounded protruding bits of your puzzlie piece
-          </Text>
-        </AlphaStack>
-      </Box>
-      <AlphaCard roundedAbove="sm">
-        <AlphaStack gap="4">
-          <TextField label="Interjamb style" />
-          <TextField label="Interjamb ratio" />
-        </AlphaStack>
-      </AlphaCard>
-    </Columns>
-    <Columns columns={{xs: '1fr', md: '2fr 5fr'}} gap="4">
-      <Box
-        as="section"
-        paddingInlineStart={{xs: 4, sm: 0}}
-        paddingInlineEnd={{xs: 4, sm: 0}}
-      >
-        <AlphaStack gap="4">
-          <Text as="h3" variant="headingMd">
-            Dimensions
-          </Text>
-          <Text as="p" variant="bodyMd">
-            Interjambs are the rounded protruding bits of your puzzlie piece
-          </Text>
-        </AlphaStack>
-      </Box>
-      <AlphaCard roundedAbove="sm">
-        <AlphaStack gap="4">
-          <TextField label="Horizontal" />
-          <TextField label="Interjamb ratio" />
-        </AlphaStack>
-      </AlphaCard>
-    </Columns>
-  </AlphaStack>
-</Page>
+function AppSettingsLayoutExample() {
+  const {smUp} = useBreakpoints();
+  return (
+    <Page
+      divider
+      primaryAction={{content: 'View on your store', disabled: true}}
+      secondaryActions={[
+        {
+          content: 'Duplicate',
+          accessibilityLabel: 'Secondary action label',
+          onAction: () => alert('Duplicate action'),
+        },
+      ]}
+    >
+      <AlphaStack gap={{xs: '8', sm: '4'}}>
+        <Columns columns={{xs: '1fr', md: '2fr 5fr'}} gap="4">
+          <Box
+            as="section"
+            paddingInlineStart={{xs: 4, sm: 0}}
+            paddingInlineEnd={{xs: 4, sm: 0}}
+          >
+            <AlphaStack gap="4">
+              <Text as="h3" variant="headingMd">
+                InterJambs
+              </Text>
+              <Text as="p" variant="bodyMd">
+                Interjambs are the rounded protruding bits of your puzzlie piece
+              </Text>
+            </AlphaStack>
+          </Box>
+          <AlphaCard roundedAbove="sm">
+            <AlphaStack gap="4">
+              <TextField label="Interjamb style" />
+              <TextField label="Interjamb ratio" />
+            </AlphaStack>
+          </AlphaCard>
+        </Columns>
+        {smUp ? <Divider borderStyle="base" /> : null}
+        <Columns columns={{xs: '1fr', md: '2fr 5fr'}} gap="4">
+          <Box
+            as="section"
+            paddingInlineStart={{xs: 4, sm: 0}}
+            paddingInlineEnd={{xs: 4, sm: 0}}
+          >
+            <AlphaStack gap="4">
+              <Text as="h3" variant="headingMd">
+                Dimensions
+              </Text>
+              <Text as="p" variant="bodyMd">
+                Interjambs are the rounded protruding bits of your puzzlie piece
+              </Text>
+            </AlphaStack>
+          </Box>
+          <AlphaCard roundedAbove="sm">
+            <AlphaStack gap="4">
+              <TextField label="Horizontal" />
+              <TextField label="Interjamb ratio" />
+            </AlphaStack>
+          </AlphaCard>
+        </Columns>
+      </AlphaStack>
+    </Page>
+  );
+}
 ```
 
 </div>