From e6fd1f639dfbc825599a6e7156ccf92c0cc00c52 Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@marcelltoth.net>
Date: Fri, 26 Mar 2021 15:36:26 +0100
Subject: [PATCH 1/4] fix: align arrows

---
 src/components/SchemaRow/SchemaRow.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/SchemaRow/SchemaRow.tsx b/src/components/SchemaRow/SchemaRow.tsx
index d2b4c60c..f4de633a 100644
--- a/src/components/SchemaRow/SchemaRow.tsx
+++ b/src/components/SchemaRow/SchemaRow.tsx
@@ -75,9 +75,10 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
                     ...(!isBrokenRef && nestingLevel === 0
                       ? {
                           position: 'relative',
+                          left: -1 * SCHEMA_ROW_OFFSET,
                         }
                       : {
-                          left: CARET_ICON_BOX_DIMENSION * -1 + SCHEMA_ROW_OFFSET / -2,
+                          left: CARET_ICON_BOX_DIMENSION * -1 - SCHEMA_ROW_OFFSET,
                         }),
                   }}
                   size={CARET_ICON_SIZE}

From 572a723f7f9e75ac6b32f1656b095713b7d47e15 Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@marcelltoth.net>
Date: Fri, 26 Mar 2021 15:38:12 +0100
Subject: [PATCH 2/4] fix: symmetric margins

---
 src/components/JsonSchemaViewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/JsonSchemaViewer.tsx b/src/components/JsonSchemaViewer.tsx
index 058f8415..ddbe7b80 100644
--- a/src/components/JsonSchemaViewer.tsx
+++ b/src/components/JsonSchemaViewer.tsx
@@ -66,7 +66,7 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
         <ChildStack
           childNodes={jsonSchemaTreeRoot.children}
           currentNestingLevel={-1}
-          className={cn(className, 'JsonSchemaViewer')}
+          className={cn(className, 'JsonSchemaViewer', 'sl-mr-5')}
         />
       </JSVOptionsContextProvider>
     </MosaicProvider>

From a089100899205c39678b0fcec90464b65b4d10ac Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@marcelltoth.net>
Date: Fri, 26 Mar 2021 18:01:07 +0100
Subject: [PATCH 3/4] fix: let the description text break into new lines

---
 src/components/SchemaRow/SchemaRow.tsx | 6 +++---
 src/components/shared/Description.tsx  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SchemaRow/SchemaRow.tsx b/src/components/SchemaRow/SchemaRow.tsx
index f4de633a..1793cbe2 100644
--- a/src/components/SchemaRow/SchemaRow.tsx
+++ b/src/components/SchemaRow/SchemaRow.tsx
@@ -85,7 +85,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
                 />
               ) : null}
 
-              <div className="sl-flex sl-items-center sl-text-base sl-flex-1 sl-truncate">
+              <div className="sl-flex sl-items-center sl-text-base sl-flex-1">
                 {schemaNode.subpath.length > 0 && shouldShowPropertyName(schemaNode) && (
                   <div className="sl-mr-2 sl-font-mono sl-font-bold">{last(schemaNode.subpath)}</div>
                 )}
@@ -111,7 +111,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
                 ) : null}
 
                 {schemaNode.subpath.length > 1 && schemaNode.subpath[0] === 'patternProperties' ? (
-                  <div className="sl-ml-2 sl-truncate sl-text-muted">(pattern property)</div>
+                  <div className="sl-ml-2 sl-text-muted">(pattern property)</div>
                 ) : null}
                 {choices.length > 1 && (
                   <Select
@@ -137,7 +137,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
             </div>
 
             {typeof description === 'string' && description.length > 0 && (
-              <div className="sl-flex sl-flex-1 sl-my-2 sl-py-px sl-truncate">
+              <div className="sl-flex sl-flex-1 sl-my-2 sl-py-px">
                 <Description value={description} />
               </div>
             )}
diff --git a/src/components/shared/Description.tsx b/src/components/shared/Description.tsx
index 3d2eba0b..59554c97 100644
--- a/src/components/shared/Description.tsx
+++ b/src/components/shared/Description.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export const Description: React.FunctionComponent<{ value: string }> = ({ value }) => (
   // TODO (JJ): Add mosaic popover showing full description in MarkdownViewer
-  <div className="sl-truncate sl-w-full sl-text-muted" title={value}>
+  <div className="sl-w-full sl-text-muted" title={value}>
     {value}
   </div>
 );

From 1a1f609862fb24816271929f631958e6e54aea2f Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@marcelltoth.net>
Date: Mon, 29 Mar 2021 11:01:01 +0200
Subject: [PATCH 4/4] test: update snapshots

---
 .../__snapshots__/index.spec.tsx.snap         | 160 +++++++++---------
 src/__tests__/index.spec.tsx                  |  26 +--
 .../shared/__tests__/Property.spec.tsx        |  16 +-
 3 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/src/__tests__/__snapshots__/index.spec.tsx.snap b/src/__tests__/__snapshots__/index.spec.tsx.snap
index d853e74b..f77c57e0 100644
--- a/src/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/__tests__/__snapshots__/index.spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`Expanded depth nested object static given initial level set to 0, shoul
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -21,7 +21,7 @@ exports[`Expanded depth nested object static given initial level set to 0, shoul
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>bar</div>
                     <span>object</span>
@@ -38,7 +38,7 @@ exports[`Expanded depth nested object static given initial level set to 0, shoul
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>foo</div>
                     <span>array of objects</span>
@@ -64,7 +64,7 @@ exports[`Expanded depth nested object static given initial level set to 1, shoul
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -77,7 +77,7 @@ exports[`Expanded depth nested object static given initial level set to 1, shoul
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>bar</div>
                     <span>object</span>
@@ -93,7 +93,7 @@ exports[`Expanded depth nested object static given initial level set to 1, shoul
                 <div>
                   <div>
                     <div>
-                      <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                      <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                       <div>
                         <div>barFoo</div>
                         <span>object</span>
@@ -144,7 +144,7 @@ exports[`Expanded depth nested object static given initial level set to 1, shoul
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>foo</div>
                     <span>array of objects</span>
@@ -203,7 +203,7 @@ exports[`Expanded depth nested object static given initial level set to 2, shoul
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -216,7 +216,7 @@ exports[`Expanded depth nested object static given initial level set to 2, shoul
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>bar</div>
                     <span>object</span>
@@ -232,7 +232,7 @@ exports[`Expanded depth nested object static given initial level set to 2, shoul
                 <div>
                   <div>
                     <div>
-                      <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                      <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                       <div>
                         <div>barFoo</div>
                         <span>object</span>
@@ -300,7 +300,7 @@ exports[`Expanded depth nested object static given initial level set to 2, shoul
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>foo</div>
                     <span>array of objects</span>
@@ -359,7 +359,7 @@ exports[`HTML Output given anyOf combiner placed next to allOf given allOf mergi
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <div
@@ -566,7 +566,7 @@ exports[`HTML Output given complex type that includes array and complex array su
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -616,7 +616,7 @@ exports[`HTML Output given multiple object and string type, should process prope
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <span>string</span>
@@ -660,7 +660,7 @@ exports[`HTML Output given oneOf combiner placed next to allOf given allOf mergi
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <div
@@ -808,7 +808,7 @@ exports[`HTML Output given read mode, should populate proper nodes 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <span>string</span>
@@ -852,7 +852,7 @@ exports[`HTML Output given standalone mode, should populate proper nodes 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <span>string</span>
@@ -914,7 +914,7 @@ exports[`HTML Output given visible $ref node, should try to inject the title imm
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -927,7 +927,7 @@ exports[`HTML Output given visible $ref node, should try to inject the title imm
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>foo</div>
                     <span>User</span>
@@ -961,7 +961,7 @@ exports[`HTML Output given visible $ref node, should try to inject the title imm
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>user</div>
                     <span>User</span>
@@ -987,7 +987,7 @@ exports[`HTML Output given write mode, should populate proper nodes 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <span>string</span>
@@ -1031,7 +1031,7 @@ exports[`HTML Output should match arrays/of-allofs.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>Test</span></div>
             </div>
           </div>
@@ -1044,7 +1044,7 @@ exports[`HTML Output should match arrays/of-allofs.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>array-all-objects</div>
                     <span>array of objects</span>
@@ -1103,7 +1103,7 @@ exports[`HTML Output should match arrays/of-arrays.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>array of objects</span></div>
             </div>
           </div>
@@ -1157,7 +1157,7 @@ exports[`HTML Output should match arrays/of-objects.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -1170,7 +1170,7 @@ exports[`HTML Output should match arrays/of-objects.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>propertyIsArrayOfObjects</div>
                     <span>array of objects</span>
@@ -1213,7 +1213,7 @@ exports[`HTML Output should match arrays/of-refs.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
               <div><span>$ref(./models/todo-full.json)[]</span></div>
             </div>
           </div>
@@ -1248,7 +1248,7 @@ exports[`HTML Output should match arrays/with-multiple-arrayish-items.json 1`] =
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>array</span></div>
             </div>
           </div>
@@ -1274,7 +1274,7 @@ exports[`HTML Output should match arrays/with-multiple-arrayish-items.json 1`] =
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div><span>object</span></div>
                 </div>
               </div>
@@ -1348,7 +1348,7 @@ exports[`HTML Output should match arrays/with-ordered-items.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>array</span></div>
             </div>
           </div>
@@ -1396,7 +1396,7 @@ exports[`HTML Output should match arrays/with-single-arrayish-items.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>array of objects</span></div>
             </div>
           </div>
@@ -1468,7 +1468,7 @@ exports[`HTML Output should match combiners/allOfs/base.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -1481,7 +1481,7 @@ exports[`HTML Output should match combiners/allOfs/base.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>AllOfMergeObjects</div>
                     <span>object</span>
@@ -1570,7 +1570,7 @@ exports[`HTML Output should match combiners/allOfs/base.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>AllOfMergeObjectPropertyValidations</div>
                     <span>object</span>
@@ -1608,7 +1608,7 @@ exports[`HTML Output should match combiners/allOfs/base.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>AllOfMergeRefs</div>
                     <span>object</span>
@@ -1702,7 +1702,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -1715,7 +1715,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>foo</div>
                     <span>object</span>
@@ -1731,7 +1731,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                 <div>
                   <div>
                     <div>
-                      <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                      <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                       <div>
                         <div>user</div>
                         <span>allOf</span>
@@ -1747,7 +1747,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                     <div>
                       <div>
                         <div>
-                          <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                          <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                           <div><span>object</span></div>
                         </div>
                       </div>
@@ -1760,7 +1760,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                         <div>
                           <div>
                             <div>
-                              <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                              <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                               <div>
                                 <div>names</div>
                                 <span>
@@ -1797,7 +1797,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                         <div>
                           <div>
                             <div>
-                              <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                              <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                               <div>
                                 <div>users</div>
                                 <span>array of objects</span>
@@ -1813,7 +1813,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                             <div>
                               <div>
                                 <div>
-                                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                   <div>
                                     <div>creation</div>
                                     <span>object</span>
@@ -1829,7 +1829,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                 <div>
                                   <div>
                                     <div>
-                                      <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                      <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                       <div>
                                         <div>user</div>
                                         <span>allOf</span>
@@ -1845,7 +1845,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                     <div>
                                       <div>
                                         <div>
-                                          <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                          <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                           <div><span>object</span></div>
                                         </div>
                                       </div>
@@ -1858,7 +1858,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                         <div>
                                           <div>
                                             <div>
-                                              <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                              <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                               <div>
                                                 <div>names</div>
                                                 <span>
@@ -1895,7 +1895,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                         <div>
                                           <div>
                                             <div>
-                                              <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                              <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                               <div>
                                                 <div>users</div>
                                                 <span>array of objects</span>
@@ -1912,7 +1912,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                               <div>
                                                 <div>
                                                   <div
-                                                    style=\\"width: 20px; height: 20px; left: -23.5px\\"
+                                                    style=\\"width: 20px; height: 20px; left: -27px\\"
                                                     role=\\"button\\"
                                                   ></div>
                                                   <div>
@@ -1931,7 +1931,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                                   <div>
                                                     <div>
                                                       <div
-                                                        style=\\"width: 20px; height: 20px; left: -23.5px\\"
+                                                        style=\\"width: 20px; height: 20px; left: -27px\\"
                                                         role=\\"button\\"
                                                       ></div>
                                                       <div>
@@ -1950,7 +1950,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                                       <div>
                                                         <div>
                                                           <div
-                                                            style=\\"width: 20px; height: 20px; left: -23.5px\\"
+                                                            style=\\"width: 20px; height: 20px; left: -27px\\"
                                                             role=\\"button\\"
                                                           ></div>
                                                           <div><span>object</span></div>
@@ -2058,7 +2058,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>bar</div>
                     <span>object</span>
@@ -2074,7 +2074,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                 <div>
                   <div>
                     <div>
-                      <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                      <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                       <div>
                         <div>foo</div>
                         <span>object</span>
@@ -2090,7 +2090,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                     <div>
                       <div>
                         <div>
-                          <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                          <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                           <div>
                             <div>user</div>
                             <span>allOf</span>
@@ -2106,7 +2106,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                         <div>
                           <div>
                             <div>
-                              <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                              <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                               <div><span>object</span></div>
                             </div>
                           </div>
@@ -2119,7 +2119,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                             <div>
                               <div>
                                 <div>
-                                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                   <div>
                                     <div>names</div>
                                     <span>
@@ -2156,7 +2156,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                             <div>
                               <div>
                                 <div>
-                                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                   <div>
                                     <div>users</div>
                                     <span>array of objects</span>
@@ -2172,7 +2172,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                 <div>
                                   <div>
                                     <div>
-                                      <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                      <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                       <div>
                                         <div>creation</div>
                                         <span>object</span>
@@ -2188,7 +2188,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                     <div>
                                       <div>
                                         <div>
-                                          <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                          <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                           <div>
                                             <div>user</div>
                                             <span>allOf</span>
@@ -2204,7 +2204,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
                                         <div>
                                           <div>
                                             <div>
-                                              <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                              <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                               <div><span>object</span></div>
                                             </div>
                                           </div>
@@ -2277,7 +2277,7 @@ exports[`HTML Output should match combiners/allOfs/todo-full.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>array of Todo Partial-s</span></div>
             </div>
           </div>
@@ -2404,7 +2404,7 @@ exports[`HTML Output should match combiners/allOfs/todo-full.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>user</div>
                     <span>User</span>
@@ -2471,7 +2471,7 @@ exports[`HTML Output should match combiners/allOfs/todo-full-2.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>Todo Full</span></div>
             </div>
           </div>
@@ -2585,7 +2585,7 @@ exports[`HTML Output should match combiners/allOfs/with-type.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <div
@@ -2756,7 +2756,7 @@ exports[`HTML Output should match combiners/oneof-with-array-type.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <div
@@ -2853,7 +2853,7 @@ exports[`HTML Output should match combiners/oneof-within-array-item.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div>
                 <div>
                   <div
@@ -2934,7 +2934,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>User</span></div>
             </div>
           </div>
@@ -3101,7 +3101,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>plan</div>
                     <div>
@@ -3190,7 +3190,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>permissions</div>
                     <div>
@@ -3228,7 +3228,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>ref</div>
                     <div>
@@ -3326,7 +3326,7 @@ exports[`HTML Output should match formats-schema.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>model-with-formats</span></div>
             </div>
           </div>
@@ -3411,7 +3411,7 @@ exports[`HTML Output should match formats-schema.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>permissions</div>
                     <div>
@@ -3459,7 +3459,7 @@ exports[`HTML Output should match references/base.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -3472,7 +3472,7 @@ exports[`HTML Output should match references/base.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>billing_address</div>
                     <span>object</span>
@@ -3541,7 +3541,7 @@ exports[`HTML Output should match references/base.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>shipping_address</div>
                     <span>object</span>
@@ -3619,7 +3619,7 @@ exports[`HTML Output should match references/nullish.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
           </div>
@@ -3657,7 +3657,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
         <div>
           <div>
             <div>
-              <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+              <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
               <div><span>object</span></div>
             </div>
             <div>
@@ -3675,7 +3675,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>availableTicketingOptions</div>
                     <span>$ref(../TicketingOptionInfo/TicketingOptionInfo.v1-0.yaml)[]</span>
@@ -3730,7 +3730,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
             <div>
               <div>
                 <div>
-                  <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                  <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                   <div>
                     <div>ticketingOptionChoice</div>
                     <span>array of objects</span>
@@ -3786,7 +3786,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
                 <div>
                   <div>
                     <div>
-                      <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                      <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                       <div>
                         <div>orderItemBreakdown</div>
                         <span>array of objects</span>
@@ -3824,7 +3824,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
                     <div>
                       <div>
                         <div>
-                          <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                          <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                           <div>
                             <div>options</div>
                             <span>array of objects</span>
@@ -3918,7 +3918,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
                         <div>
                           <div>
                             <div>
-                              <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                              <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                               <div>
                                 <div>deliveryInfo</div>
                                 <span>object</span>
diff --git a/src/__tests__/index.spec.tsx b/src/__tests__/index.spec.tsx
index 01b9e03b..3350f324 100644
--- a/src/__tests__/index.spec.tsx
+++ b/src/__tests__/index.spec.tsx
@@ -243,7 +243,7 @@ describe('Expanded depth', () => {
                   <div>
                     <div>
                       <div>
-                        <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+                        <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
                         <div><span>array of objects</span></div>
                       </div>
                     </div>
@@ -268,7 +268,7 @@ describe('Expanded depth', () => {
                   <div>
                     <div>
                       <div>
-                        <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+                        <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
                         <div><span>array of objects</span></div>
                       </div>
                     </div>
@@ -281,7 +281,7 @@ describe('Expanded depth', () => {
                       <div>
                         <div>
                           <div>
-                            <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                            <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                             <div>
                               <div>foo</div>
                               <span>array of objects</span>
@@ -311,7 +311,7 @@ describe('Expanded depth', () => {
                   <div>
                     <div>
                       <div>
-                        <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+                        <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
                         <div><span>array of objects</span></div>
                       </div>
                     </div>
@@ -324,7 +324,7 @@ describe('Expanded depth', () => {
                       <div>
                         <div>
                           <div>
-                            <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                            <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                             <div>
                               <div>foo</div>
                               <span>array of objects</span>
@@ -340,7 +340,7 @@ describe('Expanded depth', () => {
                           <div>
                             <div>
                               <div>
-                                <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                                <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                                 <div>
                                   <div>bar</div>
                                   <span>object</span>
@@ -406,7 +406,7 @@ describe('Expanded depth', () => {
                   <div>
                     <div>
                       <div>
-                        <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+                        <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
                         <div><span>array of objects</span></div>
                       </div>
                     </div>
@@ -431,7 +431,7 @@ describe('Expanded depth', () => {
                   <div>
                     <div>
                       <div>
-                        <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+                        <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
                         <div><span>array of objects</span></div>
                       </div>
                     </div>
@@ -460,7 +460,7 @@ describe('Expanded depth', () => {
                       <div>
                         <div>
                           <div>
-                            <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                            <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                             <div>
                               <div>foo</div>
                               <span>array of objects</span>
@@ -490,7 +490,7 @@ describe('Expanded depth', () => {
                   <div>
                     <div>
                       <div>
-                        <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+                        <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
                         <div><span>array of objects</span></div>
                       </div>
                     </div>
@@ -519,7 +519,7 @@ describe('Expanded depth', () => {
                       <div>
                         <div>
                           <div>
-                            <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                            <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                             <div>
                               <div>foo</div>
                               <span>array of objects</span>
@@ -629,7 +629,7 @@ describe('Expanded depth', () => {
                   <div>
                     <div>
                       <div>
-                        <div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
+                        <div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
                         <div><span>object</span></div>
                       </div>
                     </div>
@@ -712,7 +712,7 @@ describe('$ref resolving', () => {
               <div>
                 <div>
                   <div>
-                    <div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
+                    <div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
                     <div><span>$ref(#/foo)[]</span></div>
                   </div>
                 </div>
diff --git a/src/components/shared/__tests__/Property.spec.tsx b/src/components/shared/__tests__/Property.spec.tsx
index 4b6de2dc..824f168c 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-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div>"`,
+        `"<div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">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-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">array of integers</span></div></div></div></div><div></div></div></div>"`,
+        `"<div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">array of integers</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=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div>"`,
+        `"<div class=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></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=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><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 value=\\"0\\">array of strings</option><option value=\\"1\\">array of numbers</option></select></label></div><div class=\\"sl-relative\\"><button aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" aria-label=\\"Pick a type\\" id=\\"react-aria-0-3\\" aria-labelledby=\\"react-aria-0-3 react-aria-0-5\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent sl-text-body sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"><div class=\\"sl-flex sl-flex-grow sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array of strings</div></div><div class=\\"sl--mr-0.5 sl-ml-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></button></div></div></div></div></div></div><div></div></div></div></div>"`,
+        `"<div class=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center 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 value=\\"0\\">array of strings</option><option value=\\"1\\">array of numbers</option></select></label></div><div class=\\"sl-relative\\"><button aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" aria-label=\\"Pick a type\\" id=\\"react-aria-0-3\\" aria-labelledby=\\"react-aria-0-3 react-aria-0-5\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent sl-text-body sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"><div class=\\"sl-flex sl-flex-grow sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array of strings</div></div><div class=\\"sl--mr-0.5 sl-ml-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></button></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=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-p-1 sl-cursor-pointer sl-text-muted\\" style=\\"width: 20px; height: 20px; position: relative;\\" 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-center sl-text-base sl-flex-1 sl-truncate\\"><span class=\\"sl-truncate sl-text-muted\\">array of objects</span></div></div></div></div><div></div></div><div><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div></div></div></div></div><div></div></div></div><div class=\\"sl-border-t sl-self-stretch\\"></div><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">bar</div></div></div></div></div><div></div></div></div><div class=\\"sl-border-t sl-self-stretch\\"></div><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">baz</div></div></div></div></div><div></div></div></div></div></div></div>"`,
+        `"<div class=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-p-1 sl-cursor-pointer sl-text-muted\\" style=\\"width: 20px; height: 20px; position: relative; left: -7px;\\" 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-center sl-text-base sl-flex-1\\"><span class=\\"sl-truncate sl-text-muted\\">array of objects</span></div></div></div></div><div></div></div><div><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div></div></div></div></div><div></div></div></div><div class=\\"sl-border-t sl-self-stretch\\"></div><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">bar</div></div></div></div></div><div></div></div></div><div class=\\"sl-border-t sl-self-stretch\\"></div><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">baz</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=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div>"`,
+        `"<div class=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">string</span></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=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">bar</div><span class=\\"sl-truncate sl-text-muted\\">string</span></div></div></div></div><div></div></div></div></div>"`,
+        `"<div class=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">bar</div><span class=\\"sl-truncate sl-text-muted\\">string</span></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-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1 sl-truncate\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">object</span></div></div></div></div><div></div></div></div>"`,
+        `"<div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><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-center sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-bold\\">foo</div><span class=\\"sl-truncate sl-text-muted\\">object</span></div></div></div></div><div></div></div></div>"`,
       );
       wrapper.unmount();
     });