chore: adjust api code preview indentation (#9114)

packages/next/src/views/API/RenderJSON/index.scss

@@ -1,15 +1,22 @@
 @import '../../../scss/styles.scss';
 
+$tab-width: 16px;
+
 @layer payload-default {
   .query-inspector {
     &__json-children {
       position: relative;
 
+      &--nested {
+        & li {
+          padding-left: $tab-width;
+        }
+      }
+
       &:before {
         content: '';
         position: absolute;
         top: 0;
-        left: 8px;
         width: 1px;
         height: 100%;
         border-left: 1px dashed var(--theme-elevation-200);
@@ -35,10 +42,6 @@
       left: -3px;
       width: calc(100% + 3px);
 
-      svg {
-        margin-left: 5px;
-      }
-
       svg .stroke {
         stroke: var(--theme-elevation-400);
       }
@@ -76,15 +79,15 @@
       }
     }
 
-    &__row-line--nested {
-      margin-left: 25px;
-    }
-
     &__bracket {
       position: relative;
 
+      &--nested {
+        margin-left: $tab-width;
+      }
+
       &--position-end {
-        left: 5px;
+        left: 1px;
         width: calc(100% - 5px);
       }
     }

packages/next/src/views/API/RenderJSON/index.tsx

@@ -52,9 +52,9 @@ export const RenderJSON = ({
   const objectKeys = object ? Object.keys(object) : []
   const objectLength = objectKeys.length
   const [isOpen, setIsOpen] = React.useState<boolean>(true)
-  const isNestedAndEmpty = isEmpty && (parentType === 'object' || parentType === 'array')
+  const isNested = parentType === 'object' || parentType === 'array'
   return (
-    <li className={isNestedAndEmpty ? `${baseClass}__row-line--nested` : ''}>
+    <li className={isNested ? `${baseClass}__row-line--nested` : ''}>
       <button
         aria-label="toggle"
         className={`${baseClass}__list-toggle ${isEmpty ? `${baseClass}__list-toggle--empty` : ''}`}
@@ -75,7 +75,9 @@ export const RenderJSON = ({
         </span>
       </button>
 
-      <ul className={`${baseClass}__json-children`}>
+      <ul
+        className={`${baseClass}__json-children ${isNested ? `${baseClass}__json-children--nested` : ''}`}
+      >
         {isOpen &&
           objectKeys.map((key, keyIndex) => {
             let value = object[key]
@@ -142,7 +144,7 @@ export const RenderJSON = ({
       </ul>
 
       {!isEmpty && (
-        <span>
+        <span className={isNested ? `${baseClass}__bracket--nested` : ''}>
           <Bracket comma={trailingComma} position="end" type={parentType} />
         </span>
       )}

packages/next/src/views/API/index.scss

@@ -2,8 +2,8 @@
 
 @layer payload-default {
   .query-inspector {
-    --string-color: #11b102;
-    --number-color: #62c3f3;
+    --string-color: var(--color-success-450);
+    --number-color: var(--color-warning-450);
     display: flex;
     gap: calc(var(--base) * 2);
     align-items: flex-start;
@@ -116,10 +116,4 @@
       }
     }
   }
-
-  html[data-theme='light'] {
-    .query-inspector {
-      --number-color: #2e9cd3;
-    }
-  }
 }