From 39ad9e6f0e8bea6380a5ec79c9889037e6ccf0cc Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Fri, 3 Sep 2021 17:11:58 +0200
Subject: [PATCH] fix: long validations (#166)

* fix: long validations

* fix: linter errors

* fix: snapshot tests
---
 src/__fixtures__/default-schema.json          |  2 +-
 .../__snapshots__/index.spec.tsx.snap         |  3 ++
 src/components/SchemaRow/SchemaRow.tsx        |  6 ++--
 src/components/shared/Validations.tsx         | 29 ++++++++++++++-----
 .../shared/__tests__/Property.spec.tsx        | 16 +++++-----
 5 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/__fixtures__/default-schema.json b/src/__fixtures__/default-schema.json
index 7f61a2b2..4167fd7a 100644
--- a/src/__fixtures__/default-schema.json
+++ b/src/__fixtures__/default-schema.json
@@ -5,7 +5,7 @@
     "name": {
       "type": "string",
       "const": "Constant name",
-      "examples": ["Example name", "Different name"],
+      "examples": ["Example name", "Different name", "Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"],
       "description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!"
     },
     "age": {
diff --git a/src/__tests__/__snapshots__/index.spec.tsx.snap b/src/__tests__/__snapshots__/index.spec.tsx.snap
index 5f1ef5d3..af4f9e83 100644
--- a/src/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2693,6 +2693,9 @@ exports[`HTML Output should match default-schema.json 1`] = `
                   <span>Example values:</span>
                   <span>Example name</span>
                   <span>Different name</span>
+                  <span>
+                    Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+                  </span>
                 </div>
               </div>
               <div></div>
diff --git a/src/components/SchemaRow/SchemaRow.tsx b/src/components/SchemaRow/SchemaRow.tsx
index e2e46a2d..587372d2 100644
--- a/src/components/SchemaRow/SchemaRow.tsx
+++ b/src/components/SchemaRow/SchemaRow.tsx
@@ -57,13 +57,13 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
   const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);
   return (
     <div className="sl-relative">
-      <div className="sl-flex">
-        <div className="sl-min-w-0 sl-flex-grow">
+      <div className="sl-flex sl-max-w-full">
+        <div className="sl-min-w-0 sl-flex-grow sl-max-w-full">
           <div
             onClick={childNodes.length > 0 ? () => setExpanded(!isExpanded) : undefined}
             className={cn({ 'sl-cursor-pointer': childNodes.length > 0 })}
           >
-            <div className="sl-flex sl-items-center sl-my-2">
+            <div className="sl-flex sl-items-center sl-my-2 sl-max-w-full">
               {childNodes.length > 0 ? <Caret isExpanded={isExpanded} /> : null}
 
               <div className="sl-flex sl-items-baseline sl-text-base sl-flex-1">
diff --git a/src/components/shared/Validations.tsx b/src/components/shared/Validations.tsx
index 3eeffbc4..775c7224 100644
--- a/src/components/shared/Validations.tsx
+++ b/src/components/shared/Validations.tsx
@@ -138,11 +138,11 @@ const NumberValidations = ({
     return null;
   }
   return (
-    <Flex my={2} color="muted">
+    <Flex color="muted" maxW="full">
       {entries
         .map(([key, value]) => numberValidationFormatters[key](value))
         .map((value, i) => (
-          <Value key={i} name={value} className="sl-mr-2" />
+          <Value key={i} name={value} />
         ))}
     </Flex>
   );
@@ -165,10 +165,12 @@ const KeyValueValidations = ({ validations }: { validations: Dictionary<unknown>
 
 const KeyValueValidation = ({ name, values }: { name: string; values: string[] }) => {
   return (
-    <Flex flexWrap color="muted" my={2}>
-      <Text color="light">{capitalize(name)}:</Text>
+    <Flex flexWrap color="muted">
+      <Text color="light" mr={1} mb={2}>
+        {capitalize(name)}:
+      </Text>
       {uniq(values).map(value => (
-        <Value key={value} name={value} className="sl-ml-2" />
+        <Value key={value} name={value} />
       ))}
     </Flex>
   );
@@ -177,11 +179,11 @@ const KeyValueValidation = ({ name, values }: { name: string; values: string[] }
 const NameValidations = ({ validations }: { validations: Dictionary<unknown> }) => (
   <>
     {keys(validations).length ? (
-      <Flex flexWrap my={2}>
+      <Flex flexWrap maxW="full">
         {keys(validations)
           .filter(key => validations[key])
           .map(key => (
-            <Value key={key} name={key} className="sl-mr-2 sl-text-muted sl-capitalize" />
+            <Value key={key} name={key} className="sl-text-muted sl-capitalize" />
           ))}
       </Flex>
     ) : null}
@@ -189,7 +191,18 @@ const NameValidations = ({ validations }: { validations: Dictionary<unknown> })
 );
 
 const Value = ({ name, className }: { name: string; className?: string }) => (
-  <Text px={1} fontFamily="mono" bg="canvas-100" border rounded="lg" className={className}>
+  <Text
+    px={1}
+    fontFamily="mono"
+    bg="canvas-100"
+    border
+    rounded="lg"
+    wordBreak="words"
+    maxW="full"
+    mr={2}
+    mb={2}
+    className={className}
+  >
     {name}
   </Text>
 );
diff --git a/src/components/shared/__tests__/Property.spec.tsx b/src/components/shared/__tests__/Property.spec.tsx
index 9672a530..917a0c7f 100644
--- a/src/components/shared/__tests__/Property.spec.tsx
+++ b/src/components/shared/__tests__/Property.spec.tsx
@@ -83,7 +83,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema, ['properties', 'foo']);
       expect(wrapper.find(SchemaRow).html()).toMatchInlineSnapshot(
-        `"<div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div>"`,
+        `"<div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div>"`,
       );
     });
 
@@ -102,7 +102,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema, ['properties', 'foo']);
       expect(wrapper.find(SchemaRow).html()).toMatchInlineSnapshot(
-        `"<div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">array[integer]</span></div></div></div></div><div></div></div></div>"`,
+        `"<div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">array[integer]</span></div></div></div></div><div></div></div></div>"`,
       );
     });
 
@@ -120,7 +120,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema, ['items', 'properties', 'foo']);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div></div>"`,
       );
     });
 
@@ -141,7 +141,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-select sl-relative\\"><div style=\\"border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" aria-hidden=\\"true\\"><input type=\\"text\\" tabindex=\\"-1\\" style=\\"font-size: 16px;\\"><label><select size=\\"2\\" tabindex=\\"-1\\"><option></option><option value=\\"0\\">array[strings]</option><option value=\\"1\\">array[numbers]</option></select></label></div><div class=\\"sl-relative\\"><button aria-label=\\"Pick a type\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" id=\\"react-aria-0-4\\" aria-labelledby=\\"react-aria-0-4 react-aria-0-6\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent active:sl-bg-canvas-100 sl-text-body sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-input active:sl-border-button sl-border disabled:sl-opacity-50\\"><div class=\\"sl-flex sl-flex-1 sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array[strings]</div></div><div class=\\"sl-text-xs sl--mr-0.5 sl-ml-1\\"><div class=\\"sl-pt-0.5 sl-pr-0.5\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div></div></button></div></div></div></div></div></div><div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-select sl-relative\\"><div style=\\"border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" aria-hidden=\\"true\\"><input type=\\"text\\" tabindex=\\"-1\\" style=\\"font-size: 16px;\\"><label><select size=\\"2\\" tabindex=\\"-1\\"><option></option><option value=\\"0\\">array[strings]</option><option value=\\"1\\">array[numbers]</option></select></label></div><div class=\\"sl-relative\\"><button aria-label=\\"Pick a type\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" id=\\"react-aria-0-4\\" aria-labelledby=\\"react-aria-0-4 react-aria-0-6\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent active:sl-bg-canvas-100 sl-text-body sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-input active:sl-border-button sl-border disabled:sl-opacity-50\\"><div class=\\"sl-flex sl-flex-1 sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array[strings]</div></div><div class=\\"sl-text-xs sl--mr-0.5 sl-ml-1\\"><div class=\\"sl-pt-0.5 sl-pr-0.5\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div></div></button></div></div></div></div></div></div><div></div></div></div></div></div>"`,
       );
     });
 
@@ -164,7 +164,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"sl-cursor-pointer\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-absolute sl-justify-center sl-items-center sl-cursor-pointer sl-text-muted\\" style=\\"height: 12px; margin-top: 2px; left: -25px;\\" role=\\"button\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><span class=\\"sl-truncate sl-text-muted\\">array[object]</span></div></div></div></div><div></div></div><div style=\\"padding-left: 25px;\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div></div></div></div></div><div></div></div></div><div class=\\"sl-self-stretch sl-border-light sl-border-t\\"></div><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">bar</div></div></div></div></div><div></div></div></div><div class=\\"sl-self-stretch sl-border-light sl-border-t\\"></div><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">baz</div></div></div></div></div><div></div></div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"sl-cursor-pointer\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-absolute sl-justify-center sl-items-center sl-cursor-pointer sl-text-muted\\" style=\\"height: 12px; margin-top: 2px; left: -25px;\\" role=\\"button\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><span class=\\"sl-truncate sl-text-muted\\">array[object]</span></div></div></div></div><div></div></div><div style=\\"padding-left: 25px;\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div></div></div></div></div><div></div></div></div><div class=\\"sl-self-stretch sl-border-light sl-border-t\\"></div><div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">bar</div></div></div></div></div><div></div></div></div><div class=\\"sl-self-stretch sl-border-light sl-border-t\\"></div><div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">baz</div></div></div></div></div><div></div></div></div></div></div></div></div>"`,
       );
     });
 
@@ -199,12 +199,12 @@ describe('Property component', () => {
 
       let wrapper = render(schema, ['properties', 'array-all-objects', 'items', 'properties', 'foo']);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div></div>"`,
       );
 
       wrapper = render(schema, ['properties', 'array-all-objects', 'items', 'properties', 'bar']);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">bar</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">bar</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div></div>"`,
       );
     });
 
@@ -224,7 +224,7 @@ describe('Property component', () => {
 
       const wrapper = mount(<SchemaRow schemaNode={findNodeWithPath(tree, ['properties', 'foo'])!} nestingLevel={0} />);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">object</span></div></div></div></div><div></div></div></div>"`,
+        `"<div class=\\"sl-relative\\"><div class=\\"sl-flex sl-max-w-full\\"><div class=\\"sl-min-w-0 sl-flex-grow sl-max-w-full\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2 sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">object</span></div></div></div></div><div></div></div></div>"`,
       );
       wrapper.unmount();
     });