TanStack / TanStack/query

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

Open
#11,182 2 comments 0 reactions 0 assignees View on GitHub

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
  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

Image
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.