fix: fix code block width in a demo (#160)

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/contexts/demo/defaultImages.ts

@@ -8,61 +8,63 @@ export const defaultImages: UrlOption[] = [
   {
     type: 'url',
     value: `${standardUrl}/jellybeans.png`,
-    label: 'Jelly beans (256x256)',
+    label: 'Jelly beans ',
     imageType: 'image',
   },
   {
     type: 'url',
     value: `${standardUrl}/female.png`,
-    label: 'Female (256x256)',
+    label: 'Female',
     imageType: 'image',
   },
   {
     type: 'url',
     value: `${standardUrl}/femaleBellLabs.png`,
-    label: 'Female from Bell Labs (256x256)',
+    label: 'Female from Bell Labs ',
     imageType: 'image',
   },
   {
     type: 'url',
-    value: `${standardUrl}/mandrill.png`,
-    label: 'Mandrill (267x256)',
+    value: `${standardUrl}/house.png`,
+    label: 'House',
     imageType: 'image',
   },
   {
     type: 'url',
-    value: `${standardUrl}/house.png`,
-    label: 'House (267x256)',
+    value: `${standardUrl}/mandrill.png`,
+    label: 'Mandrill',
     imageType: 'image',
   },
   {
     type: 'url',
     value: `${standardUrl}/peppers.png`,
-    label: 'Peppers (267x267)',
+    label: 'Peppers',
     imageType: 'image',
   },
+
   {
     type: 'url',
     value: `${standardUrl}/barbara.jpg`,
-    label: 'Barbara (512x512)',
+    label: 'Barbara',
     imageType: 'image',
   },
+
   {
     type: 'url',
     value: `${standardUrl}/boat.png`,
-    label: 'Standard boat (512x512)',
+    label: 'Standard boat',
     imageType: 'image',
   },
   {
     type: 'url',
     value: `${standardUrl}/male.png`,
-    label: 'Male (1024x1024)',
+    label: 'Male',
     imageType: 'image',
   },
   {
     type: 'url',
     value: `${standardUrl}/airport.png`,
-    label: 'Airport (1024x1024)',
+    label: 'Airport',
     imageType: 'image',
   },
 ];
@@ -71,56 +73,57 @@ export const defaultMasks: UrlOption[] = [
   {
     type: 'url',
     value: `${morphologyMaskUrl}/circles.png`,
-    label: 'Circles (507x509)',
+    label: 'Circles',
     imageType: 'mask',
   },
   {
     type: 'url',
     value: `${morphologyMaskUrl}/shapes.png`,
-    label: 'Shapes (640x612)',
+    label: 'Shapes',
     imageType: 'mask',
   },
   {
     type: 'url',
     value: `${morphologyMaskUrl}/star.png`,
-    label: 'Star (716x716)',
+    label: 'Star',
     imageType: 'mask',
   },
   {
     type: 'url',
     value: `${standardMaskUrl}/house.png`,
-    label: 'House (267x256)',
+    label: 'House',
     imageType: 'mask',
   },
   {
     type: 'url',
     value: `${standardMaskUrl}/mandrill.png`,
-    label: 'Mandrill (267x256)',
+    label: 'Mandrill',
     imageType: 'mask',
   },
   {
     type: 'url',
     value: `${standardMaskUrl}/peppers.png`,
-    label: 'Peppers (267x267)',
+    label: 'Peppers',
     imageType: 'mask',
   },
+
   {
     type: 'url',
     value: `${standardMaskUrl}/barbara.png`,
-    label: 'Barbara (512x512)',
+    label: 'Barbara',
     imageType: 'mask',
   },
   {
     type: 'url',
     value: `${standardMaskUrl}/boat.png`,
-    label: 'Standard boat (512x512)',
+    label: 'Standard boat)',
     imageType: 'mask',
   },
 
   {
     type: 'url',
     value: `${standardMaskUrl}/male.png`,
-    label: 'Male (1024x1024)',
+    label: 'Male',
     imageType: 'mask',
   },
 ];