The code editor's font size is fixed at 0.875rem in web/styles.css, shared by #editor, #editor-highlight, and #editor-lines, and the page offers no way to change it. On a large or high-resolution monitor the code is hard to read for a 45-minute session, and on a small laptop screen a candidate may want it smaller to see more of their solution at once.
Browser zoom is the only workaround today, but it scales the whole page, including the problem statement, the avatar, and the preflight overlay, which is how #178 ended up with a modal that could not be scrolled. A candidate who only wants larger code has to accept a larger everything else.
I propose a small font size control in the editor toolbar (for example A- / A+, or a select with a few fixed sizes) that changes only the editor, remembered in localStorage the same way app.js remembers the "show sources" toggle. Keyboard shortcuts such as Ctrl/Cmd with + / - while the editor has focus would be a nice addition, but they collide with browser zoom, so I would leave them out unless a maintainer prefers otherwise.
The constraint is the one the comment above #editor, #editor-highlight already states: the textarea, the highlight overlay, and the line-number gutter must agree on every metric that affects where a glyph lands, or the caret drifts as in #82 and #155. A single CSS custom property (for example --editor-font-size) read by all three layers would keep them in step, and the font-metrics browser test proposed in #204 could cover each offered size.
Refs #82, #155, #204
The code editor's font size is fixed at
0.875reminweb/styles.css, shared by#editor,#editor-highlight, and#editor-lines, and the page offers no way to change it. On a large or high-resolution monitor the code is hard to read for a 45-minute session, and on a small laptop screen a candidate may want it smaller to see more of their solution at once.Browser zoom is the only workaround today, but it scales the whole page, including the problem statement, the avatar, and the preflight overlay, which is how #178 ended up with a modal that could not be scrolled. A candidate who only wants larger code has to accept a larger everything else.
I propose a small font size control in the editor toolbar (for example
A-/A+, or a select with a few fixed sizes) that changes only the editor, remembered inlocalStoragethe same wayapp.jsremembers the "show sources" toggle. Keyboard shortcuts such as Ctrl/Cmd with+/-while the editor has focus would be a nice addition, but they collide with browser zoom, so I would leave them out unless a maintainer prefers otherwise.The constraint is the one the comment above
#editor, #editor-highlightalready states: the textarea, the highlight overlay, and the line-number gutter must agree on every metric that affects where a glyph lands, or the caret drifts as in #82 and #155. A single CSS custom property (for example--editor-font-size) read by all three layers would keep them in step, and the font-metrics browser test proposed in #204 could cover each offered size.Refs #82, #155, #204