Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#11,182 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

  • #11184 von @waterWang — ohne Merge geschlossen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
52/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
react, typescript
Bereich
devtools, frontend

Rechercherichtung

Reproduziere das Problem mit den aufgeführten TanStack Devtools- und React Query-Paketen und der im Bericht gezeigten TanStackDevtools-Konfiguration. Untersuche, wie ReactQueryDevtoolsPanel innerhalb des allgemeinen Devtools-Bereichs angeordnet ist; abgeschlossen ist die Aufgabe, wenn das Abfragepanel die verfügbare Höhe ausfüllt und weiterhin korrekt mit langen Abfragelisten umgeht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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(),
        ]}
      />
Vorherrschende Sprache
TypeScript
Sterne
50.5k
Forks
4.2k
Ø Merge
9 Std. 34 Min.
Gemergte PRs (30 T.)
603

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/query

Alle Issues in TanStack/query

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.