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,
   }
 })