How to zoom / increase code font size?

Queries and Resources
1

Hello,
I have some problems with my sight... so for me reading very small lines of code is a problem and it causes a lot of headaches.
I tried zooming on the browser, but that messes with the user interface.
Is there a way to change the font size of the code in retool?
Thank you very much!

2

I have the exact same problem. I really with there's was a way to increase only the text editor font size.

3

Hi @andrea_bluelabs and @vangelov, thanks for surfacing this issue!

Retool uses React CodeMirror for a lot of its code editors so as a temporary workaround we might be able to target those elements with some custom CSS:

.CodeMirror{
  font-size:1.2em !important;
  line-height: 1.4em !important;
}

You can try applying this across your entire or in your advanced settings:

2012×458 28 KB

3 Likes
4

That works, thank you!

5

Thank you very much, that works!

6

I've had this workaround in place for well over a year, and very thankful for it!

However, within the last week or so, I've noticed it has stopped working for code fields/boxes and popout editors in the component inspector (still seems to work for query editor and debug console)

After snooping around in the browser elements I have tried adding .cm-editor and .cm-scroller to the custom CSS, with no luck. Any tips appreciated!

7

:thinking: what about this?

.cm-scroller .cm-line, .cm-gutter, ._J5jDY._x0m9i {
    font-size: 1.2em !important;
    line-height: 1.4em !important;
}

.cm-scroller .cm-line should target JS inputs, .cm-gutter targets line numbers, and ._J5jDY._x0m9i targets preview windows. Can you let me know if that does the trick?

8

Hi @Schteevynn Apologies for the delay in circling back to this. I think the classes we discussed in Discord are slightly different than the ones Kabirdas has mentioned here. So far in my testing, the above classes are working :thinking: Can you remind me where you're seeing this css not work?