fix wip fix code block width

Author: EscapedGibbon

src/css/custom.css

@@ -115,3 +115,7 @@ button {
   font-size: 0.75em;
   line-height: 1em;
 }
+
+.filter-demo-addon {
+  max-width: 512px;
+}

src/demo/components/ImageDemo.tsx

@@ -32,25 +32,23 @@ export default function ImageDemo({
         isMask,
       }}
     >
-      <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 4 }}>
-        <div
-          className="filter-demo alert--info"
-          style={{
-            margin: 4,
-            borderRadius: 4,
-            display: 'inline-flex',
-            flexDirection: 'column',
-            gap: 8,
-            padding: 0,
-          }}
-        >
-          <ImageDemoImages />
-          <ImageDemoToolbar />
-          <ImageDemoAddon
-            exampleCode={code}
-            defaultEditorCode={defaultEditorCode}
-          />
-        </div>
+      <div
+        className="filter-demo alert--info"
+        style={{
+          margin: 4,
+          borderRadius: 4,
+          display: 'inline-flex',
+          flexDirection: 'column',
+          gap: 8,
+          padding: 0,
+        }}
+      >
+        <ImageDemoImages />
+        <ImageDemoToolbar />
+        <ImageDemoAddon
+          exampleCode={code}
+          defaultEditorCode={defaultEditorCode}
+        />
       </div>
     </ImageDemoProvider>
   );

src/demo/contexts/demo/defaultImages.ts

@@ -26,19 +26,19 @@ export const defaultImages: UrlOption[] = [
   {
     type: 'url',
     value: `${standardUrl}/mandrill.png`,
-    label: 'Mandrill (267x256)',
+    label: 'Mandrill (267x266)',
     imageType: 'image',
   },
   {
     type: 'url',
-    value: `${standardUrl}/house.png`,
-    label: 'House (267x256)',
+    value: `${standardUrl}/peppers.png`,
+    label: 'Peppers (267x267)',
     imageType: 'image',
   },
   {
     type: 'url',
-    value: `${standardUrl}/peppers.png`,
-    label: 'Peppers (267x267)',
+    value: `${standardUrl}/house.png`,
+    label: 'House (511x514)',
     imageType: 'image',
   },
   {
@@ -47,6 +47,7 @@ export const defaultImages: UrlOption[] = [
     label: 'Barbara (512x512)',
     imageType: 'image',
   },
+
   {
     type: 'url',
     value: `${standardUrl}/boat.png`,
@@ -86,22 +87,23 @@ export const defaultMasks: UrlOption[] = [
     label: 'Star (716x716)',
     imageType: 'mask',
   },
+
   {
     type: 'url',
-    value: `${standardMaskUrl}/house.png`,
-    label: 'House (267x256)',
+    value: `${standardMaskUrl}/mandrill.png`,
+    label: 'Mandrill (267x266)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${standardMaskUrl}/mandrill.png`,
-    label: 'Mandrill (267x256)',
+    value: `${standardMaskUrl}/peppers.png`,
+    label: 'Peppers (267x267)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${standardMaskUrl}/peppers.png`,
-    label: 'Peppers (267x267)',
+    value: `${standardMaskUrl}/house.png`,
+    label: 'House (511x514)',
     imageType: 'mask',
   },
   {