Devtools scale messed up in v5 due to 62.5% trick

[high-risc]

Describe the bug

In the application I am working on we have used the 62.5% trick to make 1rem = 10px. The devtools are styled with rem now and everything has become extremely tiny. Unfortunately, since it is rem, it's not something we can change just for the devtools without affecting the rest of our app.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/blue-bush-xl39zm

Steps to reproduce

Apply the following css:

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

View the devtools and everything will be very small.

Expected behavior

The devtools look normal as they did previously

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 118.0.5993.89

Tanstack Query adapter

react-query

TanStack Query version

5.0.5

TypeScript version

4.9.5

Additional context

No response

[TkDodo]

do we need to switch to em ? @ardeora ?

[ardeora]

I think this can be fixed with a variable defined at the root element of the devtools? 🤔 All the font-sizes inside can then refer to that size using var(--root-devtools-font-size) * scaleFactor

em sizing would require a huge refactor and be very confusing for nested elements

I'll take a look at it this week

[lorand-horvath]

@ardeora Adding a scaleFactor option in the devtools for the users to be able to change it as they see fit would be very helpful. I would prefer it to be added under Settings, in addition to the Position and Theme options.

[mifrej]

Is there generally any way of adjusting the font-size of the devtools?

[mifrej]

do we need to switch to em ? @ardeora ?

That happened once already 🙄
Yes please go with em sizing.

[lorand-horvath]

Is there generally any way of adjusting the font-size of the devtools?

At the moment, I don't think so. Inspecting the styles, all I see are rem units being used, i.e. relative to the :root font-size, so a good solution would be to use a scaling factor as I mentioned above. However, that would need to be set manually for each and every app separately... E.g. if App1 uses the default root em of 16px, there might be another App2 using a root em of 10px (as in the OP) so the scaling factor for App2 would need to be adjusted by x1.6 to get the same devtools sizes as for App1.

It means that, unless there's some better trick out there, switching to ems might be a better idea (as it's usually the case with CSS).

[xobotyi]

Same here - devtools became unusable for our application.

[ardeora]

This issue has now been fixed in devtools v5.4.2. The font is inherited from the parent container. Here is an example using the 62.5% rule mentioned above. If you could please confirm if the issue has now been fixed that would be awesome! Feel free to reopen this issue if you still see issues

[ardeora]

Here is the reproduction of the 62.5% rule working correctly https://codesandbox.io/p/sandbox/gifted-archimedes-2c4v6t?file=%2Fsrc%2Fapp.css%3A1%2C1