feat(ui): add configurable diff and UI font sizing#12383
Open
PavelLaptev wants to merge 1 commit intomasterfrom
Open
feat(ui): add configurable diff and UI font sizing#12383PavelLaptev wants to merge 1 commit intomasterfrom
PavelLaptev wants to merge 1 commit intomasterfrom
Conversation
Introduce support for adjustable font sizes for diff content and the overall UI scale. Add diffFontSize to HunkDiffBody and HunkDiffRow components and propagate user setting through UnifiedDiffView and other diff consumers so line text and headers respect a configurable font size via the CSS variable --diff-font-size. Update CSS to compute smaller header sizes relative to the diff font. Add diffFontSize and uiFontScale to user settings (defaulting to 12px and 1 respectively), expose uiFontScale to the DOM with a --ui-font-scale variable, and apply it on mount and reactively so the entire UI can be scaled without changing layout. Wire diffFontSize into CommitFailedFileEntry and other components using diffs. Also adjust AppearanceSettings to surface UI font size controls (UI font scale input), and ensure zoom logic sets the document font size and UI font scale consistently. These changes let users customize diff readability and overall UI scaling independently.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Contributor
Author
|
related to #2693 |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds user-configurable typography controls to the desktop app by introducing a global UI font scale (via --ui-font-scale) and a configurable diff font size (via --diff-font-size) and wiring them through settings and diff-rendering components.
Changes:
- Introduce
uiFontScaleanddiffFontSizeto desktop user settings and surface controls in Appearance settings. - Propagate
diffFontSizethrough diff consumers and update diff CSS to use--diff-font-size. - Apply
--ui-font-scaleacross UI styles (including rich text / lexical) and set it on the DOM reactively.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/styles/core/variables.css | Scales lexical input font size using --ui-font-scale. |
| packages/ui/src/lib/richText/css/standard-theme.css | Scales rich-text header sizes using --ui-font-scale. |
| packages/ui/src/lib/components/hunkDiff/HunkDiffRow.svelte | Uses --diff-font-size for diff row text and gutter sizing. |
| packages/ui/src/lib/components/hunkDiff/HunkDiffBody.svelte | Uses --diff-font-size for comment rows and number column sizing. |
| packages/ui/src/lib/components/hunkDiff/HunkDiff.svelte | Adds diffFontSize prop and sets --diff-font-size on the wrapper. |
| packages/ui/src/lib/components/Textarea.svelte | Scales textarea font size using --ui-font-scale. |
| apps/desktop/src/styles/styles.css | Defines --ui-font-scale and overrides .text-* utility sizes to respect it. |
| apps/desktop/src/lib/settings/userSettings.ts | Adds uiFontScale and diffFontSize to settings interface/defaults. |
| apps/desktop/src/lib/dragging/DragClone.svelte | Scales drag-chip mono font size via --ui-font-scale. |
| apps/desktop/src/components/projectSettings/AppearanceSettings.svelte | Adds UI font scale and diff font size controls; passes diffFontSize into diff preview. |
| apps/desktop/src/components/profileSettings/CliSymLink.svelte | Scales mono instruction text via --ui-font-scale. |
| apps/desktop/src/components/codegen/CodegenToolCall.svelte | Scales tool call summary mono font size via --ui-font-scale. |
| apps/desktop/src/components/ZoomInOutMenuAction.svelte | Sets --ui-font-scale on the document element reactively. |
| apps/desktop/src/components/UnifiedDiffView.svelte | Passes diffFontSize into diff component usage. |
| apps/desktop/src/components/IrcMessages.svelte | Passes diffFontSize into diff rendering. |
| apps/desktop/src/components/CommitFailedFileEntry.svelte | Passes diffFontSize into diff rendering. |
| apps/desktop/src/components/CommitDetails.svelte | Scales commit metadata/description font sizes via --ui-font-scale. |
| apps/desktop/src/components/AppUpdater.svelte | Scales release-notes header font sizes via --ui-font-scale. |
| apps/desktop/src/components/AiCredentialCheck.svelte | Scales debug button font size via --ui-font-scale. |
Comment on lines
+69
to
+75
| const parsed = parseInt(value); | ||
| if (parsed) { | ||
| userSettings.update((s) => ({ | ||
| ...s, | ||
| uiFontScale: parsed / 100 | ||
| })); | ||
| } |
There was a problem hiding this comment.
The UI font scale input relies on minVal/maxVal, but manual typing can still produce out-of-range values (e.g. 999), and the current handler will persist them. Consider validating with Number.isFinite and clamping to the intended 75–150% range before updating uiFontScale.
Suggested change
| const parsed = parseInt(value); | |
| if (parsed) { | |
| userSettings.update((s) => ({ | |
| ...s, | |
| uiFontScale: parsed / 100 | |
| })); | |
| } | |
| const parsed = Number.parseInt(value, 10); | |
| if (!Number.isFinite(parsed)) { | |
| return; | |
| } | |
| const clamped = Math.min(150, Math.max(75, parsed)); | |
| userSettings.update((s) => ({ | |
| ...s, | |
| uiFontScale: clamped / 100 | |
| })); |
Comment on lines
+232
to
+234
| userSettings.update((s) => ({ | ||
| ...s, | ||
| diffFontSize: parseInt(value) || $userSettings.diffFontSize |
There was a problem hiding this comment.
diffFontSize is parsed from user input but not constrained to the minVal/maxVal range; users can type values outside 8–24 and they will be persisted. Consider validating the parsed number and clamping to the allowed range (and handling NaN explicitly) before updating settings.
Suggested change
| userSettings.update((s) => ({ | |
| ...s, | |
| diffFontSize: parseInt(value) || $userSettings.diffFontSize | |
| const parsed = parseInt(value, 10); | |
| const min = 8; | |
| const max = 24; | |
| const nextValue = Number.isNaN(parsed) | |
| ? $userSettings.diffFontSize | |
| : Math.min(max, Math.max(min, parsed)); | |
| userSettings.update((s) => ({ | |
| ...s, | |
| diffFontSize: nextValue |
Comment on lines
+46
to
+48
| $effect(() => { | ||
| setDomFontScale($userSettings.uiFontScale); | ||
| }); |
There was a problem hiding this comment.
uiFontScale is applied directly to the DOM CSS variable without any bounds checking. Since the settings UI can currently persist out-of-range values, consider clamping here as well (e.g. 0.75–1.5) to avoid accidentally breaking readability/layout if a bad value is stored.
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
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.
Screen.Recording.2026-02-17.at.09.49.32.mov
Screen.Recording.2026-02-17.at.09.50.09.mov
This pull request introduces customizable UI and diff font scaling across the desktop app and shared UI components. Users can now globally adjust the UI font size and set a specific font size for diff views, enhancing accessibility and personal preference. The implementation uses CSS variables and updates relevant components and settings to support these new options.
User font scaling and settings:
uiFontScaleanddiffFontSizeproperties to the user settings, with corresponding defaults and UI controls inAppearanceSettings.svelteto let users adjust these values. [1] [2] [3] [4]--ui-font-scaleand updated the root stylesheet and utility classes to use it for consistent scaling.UI-wide font scaling support:
AiCredentialCheck.svelte,CommitDetails.svelte,AppUpdater.svelte,CodegenToolCall.svelte,CliSymLink.svelte,DragClone.svelte,Textarea.svelte,StandardTheme__h1/h2/h3in CSS) to usecalc(... * var(--ui-font-scale, 1))for font sizes, ensuring they respond to the global scaling. [1] [2] [3] [4] [5] [6] [7] [8] [9]Diff view font size customization:
diffFontSizeas a prop and setting for all diff-related components, wiring it throughHunkDiff.svelte,HunkDiffBody.svelte, andHunkDiffRow.svelteto use a CSS variable for font size, and updated all diff view usages to pass this setting. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]Font scaling logic and reactivity:
ZoomInOutMenuAction.svelteto update the--ui-font-scalevariable reactively based on user settings. [1] [2]These changes collectively make the app's interface more accessible and customizable, especially for users requiring larger or smaller text.