Font size is unusably small on v5 query inspector about query HOT 4 CLOSED

Thanks for reporting, I'm experiencing the same issue with a MacBook Pro 16-inch from 2019, I found it difficult to read in a laptop at the default screen resolution. I wouldn't be surprise if this is related to the high DPI or the retina display and how resolutions works in Mac.
This was working better for me in @tanstack/react-query v4.29.19

from query.

Hello! This is working as intended here is an example for you.

https://codesandbox.io/p/devbox/eloquent-roman-2w4c27?file=%2Fsrc%2Findex.jsx%3A43%2C1-49%2C13&workspaceId=0d8b5620-4f50-49f2-a5b1-e4173816b150

You can provide a custom fontSize for the query devtools by simply wrapping the devtools component with your desired fontSize.

      <div
        style={{
          fontSize: "24px",
        }}
      >
        <ReactQueryDevtools initialIsOpen />
      </div>

This will set the base size of the devtools font to 24px.

I'll close this issue for now. Please let me know if you still run into any issues!

from query.

I gather we're inheriting font size from the container #6226, so the ReactQueryDevTools can just be wrapped in a div with the appropriate font size (which Tanstack will then shrink to 5/8 size, if I've understood correctly...)

However it would be really nice if this was in the tooling rather than having to be set once per app, since different devs will have different access needs and you shouldn't have to raise a PR or write temporary code just to use the tool effectively.

from query.

font size is 0.75 rem (12px) and looks fine in the examples:

https://codesandbox.io/p/devbox/tanstack-query-example-react-simple-lskn7u

It was slightly bigger in v4 (0.9em, 12.6px)

Are you saying the switch to rem caused this? Are you setting custom styles on your body that made them bigger in v4, and this doesn't work anymore in v5?

@ardeora fyi

from query.