Tanstack Query Devtools does not fill out the whole page height in the tanstack devtools

[ThijsOnGitHub]

Describe the bug

When I open the tanstack query devtools tab in tanstack devtools, the tanstack query tab does not fill the whole height.

Your minimal, reproducible example

Reproducable in all sites with tanstack query

Steps to reproduce

1. Open tanstack devtools (the general extension) with the tanstack query extension
2. Make the devtools area bigger
3. Now you see that if you have a long list of query it gets an scroll but the tanstack query extension does noet fill the whole height

Expected behavior

I would expect taht the tanstack query devtools would fill the whole height

How often does this bug happen?

Every time

Screenshots or Videos

I would expect that the devtools would be fill all over the area I marked red

Platform

• OS: Windows
• Browser: Google Chrome

Tanstack Query adapter

react-query

TanStack Query version

5.101.4

TypeScript version

6.0.3

Additional context

"@tanstack/react-query-devtools": "^5.101.4",
"@tanstack/devtools-vite": "^0.8.3",
"@tanstack/react-devtools": "^0.10.10",

Devtools code

import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import { TanStackDevtools } from '@tanstack/react-devtools';
import { formDevtoolsPlugin } from '@tanstack/react-form-devtools';
...

<TanStackDevtools
        config={{ position: 'bottom-left' }}
        plugins={[
          {
            name: 'TanStack Query',
            render: <ReactQueryDevtoolsPanel />,
          },
          {
            name: 'TanStack Router',
            render: <TanStackRouterDevtoolsPanel router={router} />,
          },
          formDevtoolsPlugin(),
        ]}
      />

[arjun2075]

Had a look at this , the panel isn't failing to fill its container, it's filling a container that's fixed at 500px.

ReactQueryDevtoolsPanel mounts into a div with a hardcoded default height:

// packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx:107
<div style={{ height: '500px', ...props.style }} className="tsqd-parent-container" ref={ref} />

Inside that, the Solid parentPanel class is height: 100% (packages/query-devtools/src/Devtools.tsx:2813), and ParentPanel itself sets no height of its own. So when you drag the TanStack Devtools shell taller, the outer 500px div doesn't grow, and the inner panel correctly fills 100% of 500px ‚Äî which is the gap you marked in red, plus the scrollbar on long query lists.

Passing style explicitly works today:

{
  name: 'TanStack Query',
  render: <ReactQueryDevtoolsPanel style={{ height: '100%' }} />,
}

That should unblock you right away.

Question for maintainers on whether the default should change: style is clearly the intended escape hatch ({ height: '100%' } is even given as an example on the prop's JSDoc), so the 500px default looks deliberate for standalone use. But when the panel is embedded as a plugin in @tanstack/react-devtools, filling the host area seems like the only sensible behavior, and requiring every user to pass style to get it is an easy thing to trip on ‚Äî as here.

Would you accept a PR that defaults the embedded/plugin case to filling its parent, leaving the standalone 500px default alone? Happy to put that together if you'd like it, but it changes a default that affects every ReactQueryDevtoolsPanel consumer, so I didn't want to guess at the intended behavior.