Tanstack Query Devtools does not fill out the whole page height in the tanstack devtools
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 50.3k
- Forks
- 4.2k
- Avg merge
- 18h 25m
- Merged PRs (30d)
- 200
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(),
]}
/>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue using the listed TanStack Devtools and React Query packages, with the TanStackDevtools configuration shown in the report. Inspect how the ReactQueryDevtoolsPanel is laid out inside the general devtools area; done means the query panel fills the available height and still handles long query lists correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- devtools, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100