ReactQueryDevtools z-index issue (and proposed solution)

[ykadosh]

The DevTools component (button & floating panel), despite having a very high z-index, can appear under elements that have a lower z-index, due to something called stacking context. In short, if one of your ancestors has a z-index lower than one of its siblings, then that sibling will be rendered over your element, regardless of your element's z-index.

The solution is to use a portal, and render the component in the body so that it is rendered over everything else regardless of the stacking context.

Has that been considered?

[TkDodo]

sounds good - happy to accept a PR 🙏

[ykadosh]

Happy to raise a PR 😁
Can you kindly point me to the correct file in the repo?

[TkDodo]

start here: https://github.com/TanStack/query/tree/beta/packages/react-query-devtools