From 63d3526b7c247d533a550aae9003e22a9982e0d1 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Wed, 8 Oct 2025 15:29:03 +0200
Subject: [PATCH 1/2] fix: issue with responsiveness in jsontree

---
 .changeset/wicked-cobras-peel.md             |   5 +
 packages/devtools-ui/src/components/tree.tsx | 206 ++++++++-----------
 2 files changed, 95 insertions(+), 116 deletions(-)
 create mode 100644 .changeset/wicked-cobras-peel.md

diff --git a/.changeset/wicked-cobras-peel.md b/.changeset/wicked-cobras-peel.md
new file mode 100644
index 00000000..02a59266
--- /dev/null
+++ b/.changeset/wicked-cobras-peel.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-ui': patch
+---
+
+fix responsiveness in jsontree
diff --git a/packages/devtools-ui/src/components/tree.tsx b/packages/devtools-ui/src/components/tree.tsx
index a1291fd3..bb4a6023 100644
--- a/packages/devtools-ui/src/components/tree.tsx
+++ b/packages/devtools-ui/src/components/tree.tsx
@@ -10,6 +10,7 @@ export function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
   defaultExpansionDepth?: number
   collapsePaths?: Array<TName>
 }) {
+
   return (
     <JsonValue
       isRoot
@@ -36,94 +37,76 @@ function JsonValue(props: {
   collapsePaths?: Array<string>
   path: string
 }) {
-  const {
-    value,
-    keyName,
-    isRoot = false,
-    isLastKey,
-    copyable,
-    defaultExpansionDepth,
-    depth,
-    collapsePaths,
-    path,
-  } = props
+
   const styles = useStyles()
 
   return (
-    <span class={styles().tree.valueContainer(isRoot)}>
-      {keyName && typeof value !== 'object' && !Array.isArray(value) && (
-        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>
+    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>
+      {props.keyName && typeof props.value !== 'object' && !Array.isArray(props.value) && (
+        <span class={styles().tree.valueKey}>&quot;{props.keyName}&quot;: </span>
       )}
       {(() => {
-        if (typeof value === 'string') {
+        if (typeof props.value === 'string') {
           return (
-            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>
+            <span class={styles().tree.valueString}>&quot;{props.value}&quot;</span>
           )
         }
-        if (typeof value === 'number') {
-          return <span class={styles().tree.valueNumber}>{value}</span>
+        if (typeof props.value === 'number') {
+          return <span class={styles().tree.valueNumber}>{props.value}</span>
         }
-        if (typeof value === 'boolean') {
-          return <span class={styles().tree.valueBoolean}>{String(value)}</span>
+        if (typeof props.value === 'boolean') {
+          return <span class={styles().tree.valueBoolean}>{String(props.value)}</span>
         }
-        if (value === null) {
+        if (props.value === null) {
           return <span class={styles().tree.valueNull}>null</span>
         }
-        if (value === undefined) {
+        if (props.value === undefined) {
           return <span class={styles().tree.valueNull}>undefined</span>
         }
-        if (typeof value === 'function') {
+        if (typeof props.value === 'function') {
           return (
-            <span class={styles().tree.valueFunction}>{String(value)}</span>
+            <span class={styles().tree.valueFunction}>{String(props.value)}</span>
           )
         }
-        if (Array.isArray(value)) {
+        if (Array.isArray(props.value)) {
           return (
             <ArrayValue
-              defaultExpansionDepth={defaultExpansionDepth}
-              depth={depth}
-              copyable={copyable}
-              keyName={keyName}
-              value={value}
-              collapsePaths={collapsePaths}
-              path={path}
+              defaultExpansionDepth={props.defaultExpansionDepth}
+              depth={props.depth}
+              copyable={props.copyable}
+              keyName={props.keyName}
+              value={props.value}
+              collapsePaths={props.collapsePaths}
+              path={props.path}
             />
           )
         }
-        if (typeof value === 'object') {
+        if (typeof props.value === 'object') {
           return (
             <ObjectValue
-              defaultExpansionDepth={defaultExpansionDepth}
-              depth={depth}
-              copyable={copyable}
-              keyName={keyName}
-              value={value}
-              collapsePaths={collapsePaths}
-              path={path}
+              defaultExpansionDepth={props.defaultExpansionDepth}
+              depth={props.depth}
+              copyable={props.copyable}
+              keyName={props.keyName}
+              value={props.value}
+              collapsePaths={props.collapsePaths}
+              path={props.path}
             />
           )
         }
         return <span />
       })()}
-      {copyable && (
+      {props.copyable && (
         <div class={clsx(styles().tree.actions, 'actions')}>
-          <CopyButton value={value} />
+          <CopyButton value={props.value} />
         </div>
       )}
-      {isLastKey || isRoot ? '' : <span>,</span>}
+      {props.isLastKey || props.isRoot ? '' : <span>,</span>}
     </span>
   )
 }
 
-const ArrayValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth,
-  collapsePaths,
-  path,
-}: {
+const ArrayValue = (props: {
   value: Array<any>
   copyable?: boolean
   keyName?: string
@@ -135,15 +118,15 @@ const ArrayValue = ({
   const styles = useStyles()
 
   const [expanded, setExpanded] = createSignal(
-    depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
+    props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path),
   )
 
-  if (value.length === 0) {
+  if (props.value.length === 0) {
     return (
       <span class={styles().tree.expanderContainer}>
-        {keyName && (
+        {props.keyName && (
           <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
-            &quot;{keyName}&quot;:{' '}
+            &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
 
@@ -158,7 +141,7 @@ const ArrayValue = ({
         expanded={expanded()}
       />
 
-      {keyName && (
+      {props.keyName && (
         <span
           onclick={(e) => {
             e.stopPropagation()
@@ -167,27 +150,27 @@ const ArrayValue = ({
           }}
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
-          &quot;{keyName}&quot;:{' '}
-          <span class={styles().tree.info}>{value.length} items</span>
+          &quot;{props.keyName}&quot;:{' '}
+          <span class={styles().tree.info}>{props.value.length} items</span>
         </span>
       )}
 
       <span class={styles().tree.valueBraces}>[</span>
 
       <Show when={expanded()}>
-        <span class={styles().tree.expandedLine(Boolean(keyName))}>
-          <For each={value}>
+        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>
+          <For each={props.value}>
             {(item, i) => {
-              const isLastKey = i() === value.length - 1
+              const isLastKey = i() === props.value.length - 1
               return (
                 <JsonValue
-                  copyable={copyable}
+                  copyable={props.copyable}
                   value={item}
                   isLastKey={isLastKey}
-                  defaultExpansionDepth={defaultExpansionDepth}
-                  depth={depth + 1}
-                  collapsePaths={collapsePaths}
-                  path={path ? `${path}[${i()}]` : `[${i()}]`}
+                  defaultExpansionDepth={props.defaultExpansionDepth}
+                  depth={props.depth + 1}
+                  collapsePaths={props.collapsePaths}
+                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}
                 />
               )
             }}
@@ -212,15 +195,7 @@ const ArrayValue = ({
   )
 }
 
-const ObjectValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth,
-  collapsePaths,
-  path,
-}: {
+const ObjectValue = (props: {
   value: Record<string, any>
   keyName?: string
   copyable?: boolean
@@ -232,18 +207,18 @@ const ObjectValue = ({
   const styles = useStyles()
 
   const [expanded, setExpanded] = createSignal(
-    depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
+    props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path),
   )
 
-  const keys = Object.keys(value)
+  const keys = Object.keys(props.value)
   const lastKeyName = keys[keys.length - 1]
 
   if (keys.length === 0) {
     return (
       <span class={styles().tree.expanderContainer}>
-        {keyName && (
+        {props.keyName && (
           <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
-            &quot;{keyName}&quot;:{' '}
+            &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
 
@@ -254,14 +229,14 @@ const ObjectValue = ({
 
   return (
     <span class={styles().tree.expanderContainer}>
-      {keyName && (
+      {props.keyName && (
         <Expander
           onClick={() => setExpanded(!expanded())}
           expanded={expanded()}
         />
       )}
 
-      {keyName && (
+      {props.keyName && (
         <span
           onClick={(e) => {
             e.stopPropagation()
@@ -270,7 +245,7 @@ const ObjectValue = ({
           }}
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
-          &quot;{keyName}&quot;:{' '}
+          &quot;{props.keyName}&quot;:{' '}
           <span class={styles().tree.info}>{keys.length} items</span>
         </span>
       )}
@@ -278,19 +253,19 @@ const ObjectValue = ({
       <span class={styles().tree.valueBraces}>{'{'}</span>
 
       <Show when={expanded()}>
-        <span class={styles().tree.expandedLine(Boolean(keyName))}>
+        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>
           <For each={keys}>
             {(k) => (
               <>
                 <JsonValue
-                  value={value[k]}
+                  value={props.value[k]}
                   keyName={k}
                   isLastKey={lastKeyName === k}
-                  copyable={copyable}
-                  defaultExpansionDepth={defaultExpansionDepth}
-                  depth={depth + 1}
-                  collapsePaths={collapsePaths}
-                  path={`${path}${path ? '.' : ''}${k}`}
+                  copyable={props.copyable}
+                  defaultExpansionDepth={props.defaultExpansionDepth}
+                  depth={props.depth + 1}
+                  collapsePaths={props.collapsePaths}
+                  path={`${props.path}${props.path ? '.' : ''}${k}`}
                 />
               </>
             )}
@@ -326,34 +301,33 @@ const CopyButton = (props: { value: unknown }) => {
     <button
       class={styles().tree.actionButton}
       title="Copy object to clipboard"
-      aria-label={`${
-        copyState() === 'NoCopy'
-          ? 'Copy object to clipboard'
-          : copyState() === 'SuccessCopy'
-            ? 'Object copied to clipboard'
-            : 'Error copying object to clipboard'
-      }`}
+      aria-label={`${copyState() === 'NoCopy'
+        ? 'Copy object to clipboard'
+        : copyState() === 'SuccessCopy'
+          ? 'Object copied to clipboard'
+          : 'Error copying object to clipboard'
+        }`}
       onClick={
         copyState() === 'NoCopy'
           ? () => {
-              navigator.clipboard
-                .writeText(JSON.stringify(props.value, null, 2))
-                .then(
-                  () => {
-                    setCopyState('SuccessCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                  (err) => {
-                    console.error('Failed to copy: ', err)
-                    setCopyState('ErrorCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                )
-            }
+            navigator.clipboard
+              .writeText(JSON.stringify(props.value, null, 2))
+              .then(
+                () => {
+                  setCopyState('SuccessCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+                (err) => {
+                  console.error('Failed to copy: ', err)
+                  setCopyState('ErrorCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+              )
+          }
           : undefined
       }
     >
@@ -383,7 +357,7 @@ const Expander = (props: { expanded: boolean; onClick: () => void }) => {
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `,
         props.expanded &&
-          css`
+        css`
             & svg {
               top: -1px;
             }

From 6c550ba861fb9d8460f8ae7b61c47c361eba5024 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 8 Oct 2025 13:30:20 +0000
Subject: [PATCH 2/2] ci: apply automated fixes

---
 packages/devtools-ui/src/components/tree.tsx | 83 +++++++++++---------
 1 file changed, 48 insertions(+), 35 deletions(-)

diff --git a/packages/devtools-ui/src/components/tree.tsx b/packages/devtools-ui/src/components/tree.tsx
index bb4a6023..590c8dc8 100644
--- a/packages/devtools-ui/src/components/tree.tsx
+++ b/packages/devtools-ui/src/components/tree.tsx
@@ -10,7 +10,6 @@ export function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
   defaultExpansionDepth?: number
   collapsePaths?: Array<TName>
 }) {
-
   return (
     <JsonValue
       isRoot
@@ -37,25 +36,34 @@ function JsonValue(props: {
   collapsePaths?: Array<string>
   path: string
 }) {
-
   const styles = useStyles()
 
   return (
     <span class={styles().tree.valueContainer(props.isRoot ?? false)}>
-      {props.keyName && typeof props.value !== 'object' && !Array.isArray(props.value) && (
-        <span class={styles().tree.valueKey}>&quot;{props.keyName}&quot;: </span>
-      )}
+      {props.keyName &&
+        typeof props.value !== 'object' &&
+        !Array.isArray(props.value) && (
+          <span class={styles().tree.valueKey}>
+            &quot;{props.keyName}&quot;:{' '}
+          </span>
+        )}
       {(() => {
         if (typeof props.value === 'string') {
           return (
-            <span class={styles().tree.valueString}>&quot;{props.value}&quot;</span>
+            <span class={styles().tree.valueString}>
+              &quot;{props.value}&quot;
+            </span>
           )
         }
         if (typeof props.value === 'number') {
           return <span class={styles().tree.valueNumber}>{props.value}</span>
         }
         if (typeof props.value === 'boolean') {
-          return <span class={styles().tree.valueBoolean}>{String(props.value)}</span>
+          return (
+            <span class={styles().tree.valueBoolean}>
+              {String(props.value)}
+            </span>
+          )
         }
         if (props.value === null) {
           return <span class={styles().tree.valueNull}>null</span>
@@ -65,7 +73,9 @@ function JsonValue(props: {
         }
         if (typeof props.value === 'function') {
           return (
-            <span class={styles().tree.valueFunction}>{String(props.value)}</span>
+            <span class={styles().tree.valueFunction}>
+              {String(props.value)}
+            </span>
           )
         }
         if (Array.isArray(props.value)) {
@@ -118,7 +128,8 @@ const ArrayValue = (props: {
   const styles = useStyles()
 
   const [expanded, setExpanded] = createSignal(
-    props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path),
+    props.depth <= props.defaultExpansionDepth &&
+      !props.collapsePaths?.includes(props.path),
   )
 
   if (props.value.length === 0) {
@@ -207,7 +218,8 @@ const ObjectValue = (props: {
   const styles = useStyles()
 
   const [expanded, setExpanded] = createSignal(
-    props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path),
+    props.depth <= props.defaultExpansionDepth &&
+      !props.collapsePaths?.includes(props.path),
   )
 
   const keys = Object.keys(props.value)
@@ -301,33 +313,34 @@ const CopyButton = (props: { value: unknown }) => {
     <button
       class={styles().tree.actionButton}
       title="Copy object to clipboard"
-      aria-label={`${copyState() === 'NoCopy'
-        ? 'Copy object to clipboard'
-        : copyState() === 'SuccessCopy'
-          ? 'Object copied to clipboard'
-          : 'Error copying object to clipboard'
-        }`}
+      aria-label={`${
+        copyState() === 'NoCopy'
+          ? 'Copy object to clipboard'
+          : copyState() === 'SuccessCopy'
+            ? 'Object copied to clipboard'
+            : 'Error copying object to clipboard'
+      }`}
       onClick={
         copyState() === 'NoCopy'
           ? () => {
-            navigator.clipboard
-              .writeText(JSON.stringify(props.value, null, 2))
-              .then(
-                () => {
-                  setCopyState('SuccessCopy')
-                  setTimeout(() => {
-                    setCopyState('NoCopy')
-                  }, 1500)
-                },
-                (err) => {
-                  console.error('Failed to copy: ', err)
-                  setCopyState('ErrorCopy')
-                  setTimeout(() => {
-                    setCopyState('NoCopy')
-                  }, 1500)
-                },
-              )
-          }
+              navigator.clipboard
+                .writeText(JSON.stringify(props.value, null, 2))
+                .then(
+                  () => {
+                    setCopyState('SuccessCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                  (err) => {
+                    console.error('Failed to copy: ', err)
+                    setCopyState('ErrorCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                )
+            }
           : undefined
       }
     >
@@ -357,7 +370,7 @@ const Expander = (props: { expanded: boolean; onClick: () => void }) => {
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `,
         props.expanded &&
-        css`
+          css`
             & svg {
               top: -1px;
             }