fix(ui): misalignment of nested toggles on document API tab (#13424)

Fixes the weird misalignment of toggles in the API tab


Before:
<img width="799" height="1011" alt="image"
src="https://github.com/user-attachments/assets/5fc9768c-24de-4d89-a1ba-6dd606f76bec"
/>


After:
<img width="815" height="1069" alt="image"
src="https://github.com/user-attachments/assets/253dfdaa-7fca-4d16-b61e-a91474b9d6c9"
/>

Author: paulpopus

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

@@ -1,15 +1,17 @@
 @import '~@payloadcms/ui/scss';
 
-$tab-width: 16px;
+$tab-width: 24px;
 
 @layer payload-default {
   .query-inspector {
+    --tab-width: 24px;
+
     &__json-children {
       position: relative;
 
       &--nested {
         & li {
-          padding-left: $tab-width;
+          padding-left: 8px;
         }
       }
 
@@ -23,6 +25,14 @@ $tab-width: 16px;
       }
     }
 
+    &__row-line {
+      &--nested {
+        .query-inspector__json-children {
+          padding-left: var(--tab-width);
+        }
+      }
+    }
+
     &__list-wrap {
       position: relative;
     }
@@ -37,10 +47,16 @@ $tab-width: 16px;
       border-bottom-right-radius: 0;
       position: relative;
       display: flex;
-      gap: 10px;
+      column-gap: 14px;
+      row-gap: 10px;
       align-items: center;
-      left: -3px;
+      left: 0;
       width: calc(100% + 3px);
+      background-color: var(--theme-elevation-50);
+
+      &:not(.query-inspector__list-toggle--empty) {
+        margin-left: calc(var(--tab-width) * -1 - 10px);
+      }
 
       svg .stroke {
         stroke: var(--theme-elevation-400);
@@ -82,14 +98,32 @@ $tab-width: 16px;
     &__bracket {
       position: relative;
 
-      &--nested {
-        margin-left: $tab-width;
-      }
-
       &--position-end {
-        left: 1px;
+        left: 2px;
         width: calc(100% - 5px);
       }
     }
+
+    // Some specific rules targetting the very top of the nested JSON structure or very first items since they need slightly different styling
+    &__results {
+      & > .query-inspector__row-line--nested {
+        & > .query-inspector__list-toggle {
+          margin-left: 0;
+          column-gap: 6px;
+
+          .query-inspector__toggle-row-icon {
+            margin-left: -4px;
+          }
+        }
+
+        & > .query-inspector__json-children {
+          padding-left: calc(var(--base) * 1);
+        }
+
+        & > .query-inspector__bracket--nested > .query-inspector__bracket--position-end {
+          padding-left: 16px;
+        }
+      }
+    }
   }
 }