feat(appearance): add global font size setting (#3120)#3396
Merged
graycyrus merged 1 commit intoJun 5, 2026
Conversation
Add a Font size control (Small/Medium/Large/Extra Large) to Settings → Appearance. The selection drives the root <html> font-size via ThemeProvider; because Tailwind's text scale is rem-based, this scales all app text — chat messages, composer and UI chrome — independently of the OS font setting. - themeSlice: FontSize type, fontSize state (default medium), setFontSize reducer, and a shared FONT_SIZE_PX map as the single source of truth - persist fontSize via the existing localStorage-backed theme config - AppearancePanel: new Font size radiogroup reusing the existing markup - i18n keys added to en + real translations in all 13 locales - tests for the slice, ThemeProvider DOM application and the panel Closes tinyhumansai#3120
Contributor
📝 WalkthroughWalkthroughThis PR implements customizable font-size selection in the app's appearance settings. It adds Redux state management for font-size preferences, integrates font-size application into the root HTML element via ThemeProvider, provides a radio-group UI control in AppearancePanel, and includes full internationalization support across 14 languages. ChangesFont Size Customization
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/src/providers/ThemeProvider.tsx (1)
27-27: ⚡ Quick winUse the app’s namespaced debug logger instead of
console.debug.This line bypasses the repo logging convention in
app/srcand may leak verbose logs outside intended dev diagnostics.As per coding guidelines, in
app/srcuse namespaceddebuglogs with dev-only detail for diagnostic logging.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/src/providers/ThemeProvider.tsx` at line 27, Replace the direct console.debug call in ThemeProvider (the line logging "[theme] applying root font-size") with the app's namespaced debug logger (e.g., debug or themeLogger) and pass the same message and data ({ fontSize, px }); add or update the import for that logger at the top of the file and ensure the logger is used consistently in ThemeProvider (or any helper function that applies the root font-size) so diagnostic output follows the repo's dev-only namespaced logging convention.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/src/providers/ThemeProvider.tsx`:
- Line 27: Replace the direct console.debug call in ThemeProvider (the line
logging "[theme] applying root font-size") with the app's namespaced debug
logger (e.g., debug or themeLogger) and pass the same message and data ({
fontSize, px }); add or update the import for that logger at the top of the file
and ensure the logger is used consistently in ThemeProvider (or any helper
function that applies the root font-size) so diagnostic output follows the
repo's dev-only namespaced logging convention.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1348fdc5-a1dd-432a-a0c1-fe5ec0cd4504
📒 Files selected for processing (22)
app/src/components/settings/panels/AppearancePanel.test.tsxapp/src/components/settings/panels/AppearancePanel.tsxapp/src/lib/i18n/ar.tsapp/src/lib/i18n/bn.tsapp/src/lib/i18n/de.tsapp/src/lib/i18n/en.tsapp/src/lib/i18n/es.tsapp/src/lib/i18n/fr.tsapp/src/lib/i18n/hi.tsapp/src/lib/i18n/id.tsapp/src/lib/i18n/it.tsapp/src/lib/i18n/ko.tsapp/src/lib/i18n/pl.tsapp/src/lib/i18n/pt.tsapp/src/lib/i18n/ru.tsapp/src/lib/i18n/zh-CN.tsapp/src/providers/ThemeProvider.test.tsxapp/src/providers/ThemeProvider.tsxapp/src/store/index.tsapp/src/store/themeSlice.test.tsapp/src/store/themeSlice.tsapp/src/test/test-utils.tsx
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
1 participant
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.
Summary
Adds a Font size control (Small / Medium / Large / Extra Large) to Settings → Appearance. The selection drives the root
<html>font-size viaThemeProvider; because Tailwind's text scale is rem-based and:rootis 16px, this scales all app text — chat messages, the composer and UI chrome — independently of the OS / system font setting.This addresses the readability/accessibility asks in #3120 with a single, low-risk global control (per maintainer decision, no separate composer-size control).
Changes
store/themeSlice.ts—FontSizetype,fontSizestate (defaultmedium),setFontSizereducer, and a sharedFONT_SIZE_PXmap (14/16/18/20px) as the single source of truth.store/index.ts— persistfontSizevia the existing localStorage-backed theme config. No migration needed (redux-persistautoMergeLevel1defaults the field in for existing users;medium== historical 16px).providers/ThemeProvider.tsx— new effect applies the font size to<html>; existing theme/matchMedia logic untouched.components/settings/panels/AppearancePanel.tsx— new Font size radiogroup reusing the existing theme-option markup, with sized "A" preview glyphs.en.ts+ real translations in all 13 locales.Test plan
tsc --noEmit(typecheck) passesi18n:check— new keys have 0 missing / 0 extra (full parity)i18n:english:check— all new font-size keys pass the English-detection gateCloses #3120
Summary by CodeRabbit
New Features
Localization
Tests