Add a "Chat text size" setting (Small / Default / Large) to Appearance#65
Open
DragonnZhang wants to merge 1 commit into
Open
Add a "Chat text size" setting (Small / Default / Large) to Appearance#65DragonnZhang wants to merge 1 commit into
DragonnZhang wants to merge 1 commit into
Conversation
Introduces a renderer-only preference that scales the conversation transcript's typography without resizing the rest of the app (sidebar, top bar, composer, icons stay at their native size). This differs from the OS-level window zoom wired to the View menu, which scales the whole UI and is not a persisted appearance preference. Mechanism mirrors the existing ReduceMotionContext idiom: - ChatTextSizeProvider persists the choice in localStorage (craft-chat-text-size) and reflects it onto <html> as data-chat-text-size="small|medium|large". - Global CSS maps that attribute to a --chat-font-scale custom property (0.9 / 1 / 1.15). The transcript container in ChatDisplay carries a .chat-text-scope class whose font-size: calc(1em * var(--chat-font-scale)) is em-relative, so Default is exactly neutral and only the conversation body text scales. - Segmented control added to Settings -> Appearance -> Interface. - SettingsSegmentedControl gained an optional testId (adds data-testid on the group and data-value on each option) for stable, label-independent targeting. - 5 new i18n keys across all 7 locales. Adds a CDP assertion (e2e/assertions/chat-text-size.assert.ts) that drives the real control and verifies the html attribute, the resolved CSS variable, the persisted value, and the computed font-size of a probe using the real .chat-text-scope class (ratio ~1.15 at Large, ~0.9 at Small), covering apply / change / revert. Closes #64
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
Adds a "Chat text size" segmented control to Settings → Appearance →
Interface (below "Reduce motion") with Small / Default / Large. It scales
the conversation transcript's typography without resizing the rest of the app
— the sidebar, top bar, composer, and icons keep their native size.
This is distinct from the OS-level window zoom already wired to the View menu
(
webContents.setZoomFactor), which scales the entire UI and is a transientwindow zoom rather than a persisted appearance preference. A text-size control
that scales only the reading text is a recurring, unmet ask in comparable
desktop clients (Claude Desktop's "Chat font" + anthropics/claude-code #50543 /
#48887; ChatGPT desktop font-size requests).
Closes #64
How it works
Renderer-only, no qwen-code backend involvement — mirrors the merged
ReduceMotionContextidiom:ChatTextSizeProvider(context/ChatTextSizeContext.tsx) persists thechoice in
localStorage(craft-chat-text-size) and reflects it onto<html>asdata-chat-text-size="small|medium|large". Wired inmain.tsx.index.css) maps that attribute to a--chat-font-scalecustom property (
0.9/1/1.15).ChatDisplay.tsxcarries a.chat-text-scopeclass with
font-size: calc(1em * var(--chat-font-scale)). Because it isem-relative, Default (medium) is exactly neutral — no visual changefor existing users — and only the conversation's body copy scales up/down.
SettingsSegmentedControlgained an optionaltestIdprop (addsdata-testidon the group anddata-valueon each option) so the control canbe targeted independently of its localized label.
Verification
All checks were run against the branch and compared to a clean
mainbaseline:bun run typecheck:allbun testmainand this branchbun run lint:i18n:parityi18n parity OK (6 locales, 1549 keys each)bun run electron:build:rendererbun run electron:build:mainmainand this branch — pre-existing brokenlibsignal/@whiskeysockets/baileysinstall in the WhatsApp worker, unrelated to this renderer-only changeCDP assertion
e2e/assertions/chat-text-size.assert.tsdrives the real control over CDP andasserts, at each of Default → Large → Small → Default:
aria-checked,data-chat-text-sizeon<html>,--chat-font-scale(1/1.15/0.9),localStoragevalue, andfont-sizeof a probe element carrying the real.chat-text-scopeclass — asserting the Large/Default ratio ≈ 1.15 andSmall/Default ≈ 0.9 (a real pixel-level effect, not just an attribute flip).
The assertion could not be executed in this environment: launching Electron
requires downloading the Electron runtime binary, and that host is blocked by
the sandbox's egress policy (HTTP 403) — the same infrastructure limitation
documented on the merged #51.
xvfbis present; only the binary fetch isblocked. The assertion is written to run under the existing
bun run e2eharness once an environment with the Electron binary is available.
Scope
Frontend only:
apps/electron(renderer) +packages/sharedlocale JSON. Nobackend / runtime changes.
Generated by Claude Code