{{ message }}
Repository navigation
Tanstack Query Devtools does not fill out the whole page height in the tanstack devtools #11182
Description
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
- Open tanstack devtools (the general extension) with the tanstack query extension
- Make the devtools area bigger
- 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(),
]}
/>
Activity
arjun2075 commentedon Aug 13, 2026
Had a look at this , the panel isn't failing to fill its container, it's filling a container that's fixed at 500px.
ReactQueryDevtoolsPanelmounts into a div with a hardcoded default height:Inside that, the Solid
parentPanelclass isheight: 100%(packages/query-devtools/src/Devtools.tsx:2813), andParentPanelitself 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
styleexplicitly works today:That should unblock you right away.
Question for maintainers on whether the default should change:
styleis 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 passstyleto 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
ReactQueryDevtoolsPanelconsumer, so I didn't want to guess at the intended behavior.ThijsOnGitHub commentedon Aug 18, 2026
@arjun2075 Thank you, that already helps. And I see there is already an PR created.