Skip to content

Let the candidate resize the code editor font - #226

Merged
jserv merged 1 commit into
sysprog21:mainfrom
ColtenOuO:feat/editor-font-size
Oct 3, 2026
Merged

jserv merged 1 commit into
sysprog21:mainfrom
ColtenOuO:feat/editor-font-size

Conversation

@ColtenOuO

@ColtenOuO ColtenOuO commented Oct 2, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

The code editor font was fixed at 0.875rem. The only way to change it was browser zoom, which also scales the problem statement and the preflight overlay. This adds A- / A+ buttons to the editor toolbar that change only the editor and remember the choice between visits.

image

Close #218


Summary by cubic

Lets candidates change the code editor font size with new A- / A+ buttons in the editor toolbar, instead of relying on browser zoom which also scales the problem statement and overlay. The choice is stored in localStorage and restored on the next visit.

  • The textarea, highlight overlay, and gutter read a single custom property so they always stay aligned; the gutter width scales but never drops below its old minimum, so line numbers fit at every size.
  • The buttons step through six fixed sizes, marked aria-disabled at the ends so keyboard focus stays on the button, and browser tests verify every size keeps the layers aligned.
  • The default size is stored as no preference, so a later change of default reaches candidates who never moved off it.
  • Closes Let the candidate change the code editor font size #218.

Written for commit 0ea0b65. Summary will update on new commits.

Review in cubic

cubic-dev-ai[bot]

This comment was marked as resolved.

@ColtenOuO
ColtenOuO force-pushed the feat/editor-font-size branch from 0ab7556 to 3d03b36 Compare October 2, 2026 21:16
Comment thread tests/browser/editor-font-size.test.js Outdated
Comment thread tests/browser/editor-font-size.test.js
Comment thread web/styles.css Outdated
Comment thread web/interview.js Outdated
The editor was fixed at 0.875rem, and browser zoom, the only way out,
scales the problem statement and the preflight overlay with it. A- and
A+ in the editor toolbar now step through six fixed sizes, kept in
localStorage like the other preflight choices. The textarea, the
highlight overlay and the gutter all read one custom property, so they
cannot disagree on a size. The gutter width scales with it but never
drops below the old 3.25rem, so a three-digit line number still fits at
the largest size and a four-digit one at the smallest. A button at the
end of the range is marked aria-disabled rather than disabled, so a
keyboard user pressing it keeps focus. Ctrl with + and - is left alone
because it is the browser's zoom.

Close sysprog21#218
@ColtenOuO
ColtenOuO force-pushed the feat/editor-font-size branch from 3d03b36 to 0ea0b65 Compare October 3, 2026 10:24
@ColtenOuO
ColtenOuO requested a review from jserv October 3, 2026 10:35
@jserv
jserv merged commit fbdd06f into sysprog21:main Oct 3, 2026
6 checks passed
@jserv

jserv commented Oct 3, 2026

Copy link
Copy Markdown
Contributor

Thank @ColtenOuO for contributing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Let the candidate change the code editor font size

2 participants