Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#11,182 2 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

  • #11184 de @waterWang — fechado sem integrar

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
52/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
react, typescript
Domínio
devtools, frontend

Direção de pesquisa

Reproduza o problema usando os pacotes TanStack Devtools e React Query listados, com a configuração de TanStackDevtools mostrada no relatório. Inspecione como ReactQueryDevtoolsPanel está disposto dentro da área geral de devtools; considera-se concluído quando o painel de consultas preenche a altura disponível e ainda lida corretamente com listas longas de consultas.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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(),
        ]}
      />
Linguagem predominante
TypeScript
Estrelas
50.5k
Forks
4.2k
Merge médio
6h 27min
PRs com merge (30d)
614

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/query

Todas as issues de TanStack/query

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.