feat(ui): adjust roo font size #8457

elianiva · 2025-10-02T10:55:01Z

Related GitHub Issue

Closes: #8100

Roo Code Task Context (Optional)

Description

This PR adds the ability to scale the font size inside Roo's window. I didn't go with small, medium, large and instead went with multiplier because it gives the user more flexibility.
I didn't add mouse wheel binding or keyboard binding by default because it's already used by the editor and I prefer to leave that choice to the users.

We now have these two new commands:

Along with a configurable setting using roo-cline.fontSizeMultiplier that the users can configure themselves.

As a side effect, I've also replaced a few components due to them being a web components, which prevents me from updating the font-size because they're using shadow DOM. This change shouldn't matter that much, it only adds consistency to the UI.

Test Procedure

Change the settings or use the provided command from the command palette and observe the change. The only part that changes is the font size.

Pre-Submission Checklist

Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
Scope: My changes are focused on the linked issue (one major feature/fix per PR).
Self-Review: I have performed a thorough self-review of my code.
Testing: New and/or updated tests have been added to cover my changes (if applicable).
Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Normal size:

Smol size:

Comically large size:

Documentation Updates

Additional Notes

While working on this I also found that we used different ways of stylings. Might worth to revisit that in the future for consistencies.

Also, the issue didn't explain the scope on which section should have the size changed. I'm not sure if we only want to change the font in the chat? I think that's what we want because the rest can be changed using vscode settings, but for now I went with changing everything for consistency.

Let me know which one is the correct one and I'll update this PR :)

Get in Touch

@elianiva

Important

Adds font size adjustment feature using a multiplier in Roo UI, with new commands and updates across components and styles.

Behavior:
- Introduces font size adjustment using roo-cline.fontSizeMultiplier in registerCommands.ts.
- Adds commands increaseFontSize and decreaseFontSize in vscode.ts.
- Updates ClineProvider.ts to handle font size changes.
UI Components:
- Modifies font size calculations in App.tsx, BrowserSessionRow.tsx, ChatRow.tsx, and other components to use --roo-font-size-multiplier.
- Replaces VSCodeCheckbox with Checkbox in multiple settings components.
Styles:
- Updates index.css and preflight.css to incorporate --roo-font-size-multiplier for consistent font scaling.
Misc:
- Adjusts button.tsx and styles.ts for consistent UI appearance with new font size settings.
- Updates ExtensionStateContext.tsx to include fontSizeMultiplier in state.

^{This description was created by}^{for a9da56d. You can customize this summary. It will automatically update as commits are pushed.}

webview-ui/src/components/chat/ChatView.tsx

roomote

I found some issues that need attention. See inline comments.

src/core/webview/ClineProvider.ts

src/activate/registerCommands.ts

webview-ui/src/components/settings/UISettings.tsx

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

roomote

I found some issues that need attention. See inline comments.

webview-ui/src/preflight.css

…oo-Code into feat/adjust-font-size

adamhill · 2025-10-02T12:52:42Z

Very nice @elianiva . My old eyes thank you for this!

roomote

I found some issues that need attention. See inline comments.

src/activate/registerCommands.ts

roomote

I found some issues that need attention. See inline comments.

src/activate/registerCommands.ts

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

…oo-Code into feat/adjust-font-size

roomote

I found some issues that need attention. See inline comments.

src/activate/registerCommands.ts

roomote

I found some issues that need attention. See inline comments.

roomote · 2025-10-02T13:32:14Z

webview-ui/src/components/common/CodeBlock.tsx

 		word-break: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "normal")};
 		overflow-wrap: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "break-word")};
-		font-size: 0.95em;
+		font-size: calc(0.95em * var(--roo-font-size-multiplier, 1));


P1: Double-applied font scaling for code blocks. Styled containers already scale text via --roo-font-size-multiplier; multiplying an em-based size by the multiplier here applies it twice when nested (e.g., inside MarkdownBlock). Use a single scale source.

Suggested change

font-size: calc(0.95em * var(--roo-font-size-multiplier, 1));

font-size: 0.95em;

roomote · 2025-10-02T13:32:15Z

webview-ui/src/components/common/MarkdownBlock.tsx

 	code:not(pre > code) {
 		font-family: var(--vscode-editor-font-family, monospace);
-		font-size: 0.85em;
+		font-size: calc(0.85em * var(--roo-font-size-multiplier, 1));


P1: Double-applied font scaling for inline code. This element sits under a container that already sets font-size from var(--vscode-font-size) * --roo-font-size-multiplier, so multiplying the em size again compounds the factor. Remove the extra multiplier.

Suggested change

font-size: calc(0.85em * var(--roo-font-size-multiplier, 1));

font-size: 0.85em;

roomote

I found some issues that need attention. See inline comments.

roomote · 2025-10-02T13:37:03Z

webview-ui/src/components/common/MarkdownBlock.tsx

 	code:not(pre > code) {
 		font-family: var(--vscode-editor-font-family, monospace);
-		font-size: 0.85em;
+		font-size: calc(0.85em * var(--roo-font-size-multiplier, 1));


P1: Double-applied font scaling. Inline code uses em relative to its parent which already includes --roo-font-size-multiplier via StyledMarkdown. Multiplying by the multiplier again compounds scaling. Remove the extra multiplier so it scales once consistently.

Suggested change

font-size: calc(0.85em * var(--roo-font-size-multiplier, 1));

font-size: 0.85em;

roomote · 2025-10-02T13:37:03Z

webview-ui/src/components/common/MarkdownBlock.tsx

 	/* KaTeX styling */
 	.katex {
-		font-size: 1.1em;
+		font-size: calc(1.1em * var(--roo-font-size-multiplier, 1));


P2: Double-applied font scaling for KaTeX. This uses em (relative to parent that already applies the multiplier) and multiplies again. Keep it proportional to parent without the extra multiplier.

Suggested change

font-size: calc(1.1em * var(--roo-font-size-multiplier, 1));

font-size: 1.1em;

roomote · 2025-10-02T13:37:03Z

webview-ui/src/components/common/CodeBlock.tsx

 		word-break: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "normal")};
 		overflow-wrap: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "break-word")};
-		font-size: 0.95em;
+		font-size: calc(0.95em * var(--roo-font-size-multiplier, 1));


P2: Double-applied font scaling in code/pre. The parent text already reflects --roo-font-size-multiplier. Using em here and multiplying by the multiplier again compounds scaling. Remove the multiplier to avoid double scaling.

Suggested change

font-size: calc(0.95em * var(--roo-font-size-multiplier, 1));

font-size: 0.95em;

roomote

I found some issues that need attention. See inline comments.

webview-ui/src/components/ui/button.tsx

hannesrudolph · 2025-10-03T16:58:28Z

@brunobergher

elianiva · 2025-10-04T06:06:55Z

I just realised that I need to replace literally all reference to VSCodeCheckbox because it didn't get affected, I only changed the one in provider settings page. Although, I'll wait for approval whether or not we want to change the whole appearance or just changing the chat UI before doing that.

hannesrudolph · 2025-10-20T23:33:29Z

@brunobergher thoughts?

brunobergher · 2025-10-22T09:43:48Z

Sorry for the delay, @elianiva, this is awesome! I agree we need to be more consistent in using font-size as a basis for scale everywhere, but this already improves things a lot.

My only 3 comments are:

Selfishly, as the designer on the team, I'd love if we could scope this to only the chat view, because it can be very challenging to make the UI look good across sizes in specific elements like the auto-approve dropdown, settings, onboarding, etc. Plus, as you said, users can simply increase/decrease the global VSCode font size to target the UI in conjunction with the chat view area. So if you don't mind, I'd leave it to ChatView for now and expand later if needed.
Since we now have a UI Settings section, I think this deserves to go there. The display should probably be a text input with the value of the multipler (maybe with sensible bounds, like min 0.5 and max 2), plus a button to reset back to 1.
Less important, but I missed being able to use a command to also reset the size to the default, along with increase/decrease

This is create work in any case, I really appreciate it.

feat(ui): adjust roo font size

a9da56d

elianiva requested review from cte, jr and mrubens as code owners October 2, 2025 10:55

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Oct 2, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Oct 2, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Oct 2, 2025

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. UI/UX UI/UX related or focused labels Oct 2, 2025

ellipsis-dev bot reviewed Oct 2, 2025

View reviewed changes

webview-ui/src/components/chat/ChatView.tsx Outdated Show resolved Hide resolved

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Oct 2, 2025

roomote bot reviewed Oct 2, 2025

View reviewed changes

src/core/webview/ClineProvider.ts Show resolved Hide resolved

src/activate/registerCommands.ts Outdated Show resolved Hide resolved

src/activate/registerCommands.ts Outdated Show resolved Hide resolved

webview-ui/src/components/settings/UISettings.tsx Show resolved Hide resolved

elianiva and others added 4 commits October 2, 2025 19:31

fix(ui): left padding typo

20f0be4

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

fix(ui): prevent math precision inconsistencies

be653c8

fix(ui): listen for fontsize change

c2f4247

fix(ui): add a11y fields for checkbox

5031c36

roomote bot reviewed Oct 2, 2025

View reviewed changes

webview-ui/src/preflight.css Outdated Show resolved Hide resolved

webview-ui/src/preflight.css Outdated Show resolved Hide resolved

webview-ui/src/preflight.css Outdated Show resolved Hide resolved

elianiva added 3 commits October 2, 2025 19:39

Merge branch 'feat/adjust-font-size' of https://github.com/elianiva/R…

359d090

…oo-Code into feat/adjust-font-size

fix(ui): avoid double apply css

cf6f0fd

fix: missing translations

b28d0b7

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:XL This PR changes 500-999 lines, ignoring generated files. labels Oct 2, 2025

test: adjust test with new checkbox fields

8cd8501

roomote bot reviewed Oct 2, 2025

View reviewed changes

src/activate/registerCommands.ts Outdated Show resolved Hide resolved

src/activate/registerCommands.ts Outdated Show resolved Hide resolved

roomote bot reviewed Oct 2, 2025

View reviewed changes

src/activate/registerCommands.ts Outdated Show resolved Hide resolved

elianiva and others added 3 commits October 2, 2025 20:05

fix(ui): typo min should be max

ff6c500

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

fix(ui): avoid double dispatch

647ed6b

Merge branch 'feat/adjust-font-size' of https://github.com/elianiva/R…

37d5595

…oo-Code into feat/adjust-font-size

roomote bot reviewed Oct 2, 2025

View reviewed changes

src/activate/registerCommands.ts Outdated Show resolved Hide resolved

style: incorrect indent

20319d6

roomote bot reviewed Oct 2, 2025

View reviewed changes

webview-ui/src/components/ui/button.tsx Show resolved Hide resolved

hannesrudolph moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Oct 3, 2025

hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Oct 3, 2025

	font-size: calc(0.95em * var(--roo-font-size-multiplier, 1));
	font-size: 0.95em;

	font-size: calc(0.85em * var(--roo-font-size-multiplier, 1));
	font-size: 0.85em;

	font-size: calc(1.1em * var(--roo-font-size-multiplier, 1));
	font-size: 1.1em;

feat(ui): adjust roo font size #8457

Are you sure you want to change the base?

feat(ui): adjust roo font size #8457

Uh oh!

Conversation

elianiva commented Oct 2, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related GitHub Issue

Roo Code Task Context (Optional)

Description

Test Procedure

Pre-Submission Checklist

Screenshots / Videos

Documentation Updates

Additional Notes

Get in Touch

Uh oh!

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamhill commented Oct 2, 2025

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

hannesrudolph commented Oct 3, 2025

Uh oh!

elianiva commented Oct 4, 2025

Uh oh!

hannesrudolph commented Oct 20, 2025

Uh oh!

brunobergher commented Oct 22, 2025

Uh oh!

Reviewers

elianiva commented Oct 2, 2025 •

edited by ellipsis-dev bot

Loading