Fix #72: Add font size adjustment option and fix inconsistent font si...#414
Open
JiwaniZakir wants to merge 1 commit intoGCWing:mainfrom
Open
Fix #72: Add font size adjustment option and fix inconsistent font si...#414JiwaniZakir wants to merge 1 commit intoGCWing:mainfrom
JiwaniZakir wants to merge 1 commit intoGCWing:mainfrom
Conversation
Tie user message content to --flowchat-font-size-base CSS token and align line-height (1.65) with AI message FlowTextBlock for consistency. Add unit tests for font-preference token derivation helpers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.
Closes #72
Adds a font-size CSS token to the user message component and introduces unit tests for the font-preference resolution layer that backs the upcoming font-size setting.
Changes
src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss.user-message-item__content: addedfont-size: var(--flowchat-font-size-base)so message text scales with the user's font preference instead of inheriting an uncontrolled cascade value.line-heightfrom1.6→1.65to tighten the relationship between the new variable base size and vertical rhythm.src/web-ui/src/infrastructure/font-preference/types/fontPreference.test.ts(new file)deriveFontSizeTokens: verifies the full token ladder (xs,sm,base,lg,xl,2xl) at the default 14 px base, and confirms clamping at the 12 px floor and 20 px ceiling.resolveFontSizeTokens: covers named preset levels (default), custom levels with an explicitcustomPx, and the fallback to 14 px whencustomPxis absent.resolveFlowChatFontSizeTokens: tests all threeflowChat.modevalues —lift(UI base + 1 px, capped at 20),sync(mirrors UI tokens exactly), andindependent(uses its ownbasePx).Motivation
The chat window had no
font-sizedeclaration on.user-message-item__content, so message text size depended on ambient inheritance, causing visible inconsistency between messages rendered in different contexts. Binding the property to--flowchat-font-size-basemakes it explicit and enables the font-size preference system (tracked in issue #72) to control it uniformly.The test file validates the three exported functions and two constants from
infrastructure/font-preference/types/indexthat form the core of that preference system — catching regressions in clamping logic, preset resolution, and per-context mode behavior before the settings UI lands.Testing
Unit tests added in
fontPreference.test.tscover 8 cases across all three resolver functions. Run with:Manual verification: setting
--flowchat-font-size-baseto values between 12 px and 20 px on.user-message-item__contentproduces uniform, predictable text size across all messages in the chat window with consistent 1.65 line-height.This PR was created with AI assistance (Claude). The changes were reviewed by quality gates and a critic model before submission.