[polaris.shopify.com] Fix overflow and no content bugs (#7400)

Fixes: #7399

Before / After (switches to after at ~20 second mark):


https://user-images.githubusercontent.com/6844391/195714434-1407bb2f-85dd-40b7-ba91-734e2ef65366.mp4

Author: kyledurand

.changeset/green-cobras-call.md

@@ -0,0 +1,6 @@
+---
+'polaris.shopify.com': patch
+---
+
+Fixed a scaling bug caused by content overflow
+Fixed a bug where examples that don't have any content wouldn't show up

polaris.shopify.com/src/components/Frame/Frame.module.scss

@@ -19,6 +19,7 @@ $breakpointNav: $breakpointTablet;
 
 .NavAndContent {
   display: flex;
+  overflow-wrap: anywhere;
 }
 
 .PageContent {

polaris.shopify.com/src/components/PolarisExampleWrapper/PolarisExampleWrapper.module.scss

@@ -3,6 +3,10 @@
   align-items: center;
   justify-content: center;
   height: 100vh;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: 32px;
+  padding-right: 32px;
+}
+
+.Example {
+  width: 100%;
 }

polaris.shopify.com/src/components/PolarisExampleWrapper/PolarisExampleWrapper.tsx

@@ -13,7 +13,7 @@ export const withPolarisExample = (Component: ComponentType) => {
         <link rel="stylesheet" href={stylesheetHref} />
         <AppProvider i18n={translations}>
           <div className={styles.Container}>
-            <div id="polaris-example">
+            <div id="polaris-example" className={styles.Example}>
               <Component {...props} />
             </div>
           </div>