From 7442e60646b85dcec6cae346a9a2901a287649d7 Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Fri, 14 Aug 2026 02:04:07 +0800
Subject: [PATCH] fix(devtools): make panel fill container height instead of
 fixed 500px

Change the default height of devtool panels from a fixed 500px to
height: 100% with minHeight: 500px. This ensures the panel fills
its container when used inside TanStack Devtools plugin workspace,
while still having a reasonable minimum height when used standalone.

Fixes TanStack/query#11182
---
 .../preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx    | 2 +-
 packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx | 4 ++--
 packages/solid-query-devtools/src/devtoolsPanel.tsx           | 4 ++--
 packages/vue-query-devtools/src/devtoolsPanel.vue             | 3 ++-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx b/packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx
index dc22578d991..d8cc69d133b 100644
--- a/packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx
+++ b/packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx
@@ -102,7 +102,7 @@ export function PreactQueryDevtoolsPanel(
 
   return (
     <div
-      style={{ height: '500px', ...props.style }}
+      style={{ height: '100%', minHeight: '500px', ...props.style }}
       className="tsqd-parent-container"
       ref={ref}
     />
diff --git a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
index 316119ce39a..6fbc0061c1a 100644
--- a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
+++ b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
@@ -25,7 +25,7 @@ export interface DevtoolsPanelOptions {
 
   /**
    * Custom styles for the devtools panel
-   * @default { height: '500px' }
+   * @default { height: '100%', minHeight: '500px' }
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
@@ -104,7 +104,7 @@ export function ReactQueryDevtoolsPanel(
 
   return (
     <div
-      style={{ height: '500px', ...props.style }}
+      style={{ height: '100%', minHeight: '500px', ...props.style }}
       className="tsqd-parent-container"
       ref={ref}
     ></div>
diff --git a/packages/solid-query-devtools/src/devtoolsPanel.tsx b/packages/solid-query-devtools/src/devtoolsPanel.tsx
index 0b7596ab50b..d39119ba783 100644
--- a/packages/solid-query-devtools/src/devtoolsPanel.tsx
+++ b/packages/solid-query-devtools/src/devtoolsPanel.tsx
@@ -25,7 +25,7 @@ export interface DevtoolsPanelOptions {
 
   /**
    * Custom styles for the devtools panel
-   * @default { height: '500px' }
+   * @default { height: '100%', minHeight: '500px' }
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
@@ -88,7 +88,7 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
 
   return (
     <div
-      style={{ height: '500px', ...props.style }}
+      style={{ height: '100%', minHeight: '500px', ...props.style }}
       class="tsqd-parent-container"
       ref={ref}
     />
diff --git a/packages/vue-query-devtools/src/devtoolsPanel.vue b/packages/vue-query-devtools/src/devtoolsPanel.vue
index 80884daa6ec..76cf14f329d 100644
--- a/packages/vue-query-devtools/src/devtoolsPanel.vue
+++ b/packages/vue-query-devtools/src/devtoolsPanel.vue
@@ -7,7 +7,8 @@ import type { DevtoolsPanelOptions } from './types'
 const props = defineProps<DevtoolsPanelOptions>()
 const style = computed<any>(() => {
   return {
-    height: '500px',
+    height: '100%',
+    minHeight: '500px',
     ...props.style,
   }
 })