fix: honor web font size setting

.changeset/fix-web-font-size-setting.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Fix the font size setting so chat text, composer text, and sidebar text follow the selected size.

apps/kimi-web/src/components/SessionRow.vue

@@ -341,7 +341,7 @@ defineExpose({ closeMenu });
 
 .t {
   color: inherit;
-  font-size: 15px;
+  font-size: var(--ui-font-size);
   font-weight: var(--weight-regular);
   flex: 1;
   min-width: 0;

apps/kimi-web/src/components/Sidebar.vue

@@ -784,10 +784,9 @@ onBeforeUnmount(() => {
   --sb-pad-x: var(--space-4);  /* row horizontal padding */
   --sb-gutter: 20px;           /* leading icon slot (14px folder icon + 6px margin) */
   --sb-gap: var(--space-2);    /* gap between the icon slot and the text */
-  /* Sidebar reads at 16px, matching the chat content size. Override the global
-     14px UI font on this subtree so the brand / action buttons / search (which
-     derive from --ui-font-size) all scale up together. */
-  --ui-font-size: 15px;
+  /* Sidebar stays one step above compact UI chrome, but still follows the
+     user-controlled font-size preference. */
+  --ui-font-size: var(--sidebar-ui-font-size);
 }
 
 /* Session column. Width is set inline from the App resize handle. */
@@ -858,7 +857,7 @@ onBeforeUnmount(() => {
   touch-action: none;
 }
 .ch-name {
-  font-size: 15px;
+  font-size: var(--ui-font-size);
   font-weight: 500;
   line-height: 22px;
   color: var(--color-text);

apps/kimi-web/src/components/WorkspaceGroup.vue

@@ -264,7 +264,7 @@ function onHeaderDragStart(event: DragEvent): void {
 }
 
 .gh-name {
-  font-size: var(--text-lg);
+  font-size: var(--ui-font-size-lg);
   font-weight: var(--weight-medium);
   color: var(--color-text);
   flex: 1;
@@ -280,7 +280,7 @@ function onHeaderDragStart(event: DragEvent): void {
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-left: calc(var(--sb-gutter) + var(--sb-gap));
-  font-size: var(--text-xs);
+  font-size: var(--ui-font-size-xs);
   max-height: 0;
   opacity: 0;
   transition: max-height var(--duration-base) var(--ease-out),

apps/kimi-web/src/components/chat/Composer.vue

@@ -1294,7 +1294,7 @@ function selectModel(modelId: string): void {
   outline: none;
   resize: none;
   font-family: var(--font-ui);
-  font-size: 15px;
+  font-size: var(--content-font-size);
   background: transparent;
   min-height: 36px;
   max-height: calc(100vh / 4);

apps/kimi-web/src/components/chat/Markdown.vue

@@ -520,7 +520,7 @@ function copyDiff(code: string, idx: number) {
 .md :deep(.markdown-renderer blockquote),
 .md :deep(.markdown-renderer td),
 .md :deep(.markdown-renderer th) {
-  font-size: 15px;
+  font-size: var(--content-font-size);
 }
 
 /* Emphasis — bold steps up from the body (medium/500) to semibold (700). */
@@ -538,10 +538,10 @@ function copyDiff(code: string, idx: number) {
   margin: 0.85em 0 0.35em;
   line-height: var(--leading-tight);
 }
-.md :deep(h1) { font-size: var(--text-xl); border-bottom: 1px solid var(--color-line); padding-bottom: 4px; }
-.md :deep(h2) { font-size: var(--text-lg); }
-.md :deep(h3) { font-size: var(--text-lg); }
-.md :deep(h4) { font-size: var(--text-base); color: var(--color-text-muted); }
+.md :deep(h1) { font-size: max(var(--text-xl), calc(var(--content-font-size) + 3px)); border-bottom: 1px solid var(--color-line); padding-bottom: 4px; }
+.md :deep(h2) { font-size: max(var(--text-lg), calc(var(--content-font-size) + 2px)); }
+.md :deep(h3) { font-size: max(var(--text-lg), calc(var(--content-font-size) + 1px)); }
+.md :deep(h4) { font-size: max(var(--text-base), calc(var(--content-font-size) + 1px)); color: var(--color-text-muted); }
 
 /* Paragraphs */
 .md :deep(p) {

apps/kimi-web/src/composables/client/useAppearance.ts

@@ -63,7 +63,7 @@ function loadUiFontSize(): number {
 
 function applyUiFontSize(value: number): void {
   if (typeof document === 'undefined' || !document.documentElement) return;
-  document.documentElement.style.setProperty('--ui-font-size', `${clampUiFontSize(value)}px`);
+  document.documentElement.style.setProperty('--base-ui-font-size', `${clampUiFontSize(value)}px`);
 }
 
 const colorScheme = ref<ColorScheme>(loadColorScheme());

apps/kimi-web/src/style.css

@@ -197,12 +197,14 @@ summary {
   --r-sm: var(--radius-md);
   --r-md: var(--radius-lg);
   --r-lg: var(--radius-xl);
-  --ui-font-size: 14px;
+  --base-ui-font-size: 14px;
+  --ui-font-size: var(--base-ui-font-size);
   --ui-font-size-sm: calc(var(--ui-font-size) - 1px);
   --ui-font-size-xs: calc(var(--ui-font-size) - 2px);
   --ui-font-size-lg: calc(var(--ui-font-size) + 1px);
   --ui-font-size-xl: calc(var(--ui-font-size) + 2px);
-  --content-font-size: 15px;
+  --content-font-size: calc(var(--base-ui-font-size) + 1px);
+  --sidebar-ui-font-size: calc(var(--base-ui-font-size) + 1px);
   --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   /* Body/UI font follows the design-system canonical token (system UI font
      first; Inter intentionally NOT in the body chain — it stays reserved for

apps/kimi-web/src/views/DesignSystemView.vue

@@ -265,7 +265,8 @@ onUnmounted(() => {
             </ul>
 
             <h3 class="sub">Type scale &amp; weight</h3>
-            <p>The type scale keeps and formalizes the existing <code>--ui-font-size</code> (UI, default 14px) / <code>--content-font-size</code> (body, 16px) dual tracks: <b>UI controls / buttons / forms</b> use <code>--text-base</code> (14px); <b>reading body — including chat Markdown, message bubbles, etc.</b> uses <code>--text-lg</code> (16px, relaxed line-height) for readability; the <b>sidebar session list</b> uses <code>calc(var(--ui-font-size) - 1px)</code> (15px, one step below the sidebar's 16px base) for density.
+            <p>The user font-size preference writes <code>--base-ui-font-size</code>. Compact UI chrome follows it through <code>--ui-font-size</code>, while chat reading surfaces and the sidebar derive one readable step above it through <code>--content-font-size</code> and <code>--sidebar-ui-font-size</code>.</p>
+            <p>The fixed product type tokens still define component defaults: <b>UI controls / buttons / forms</b> use <code>--text-base</code> (14px); <b>reading body — including chat Markdown, message bubbles, etc.</b> stays one step larger than compact chrome for readability; the <b>sidebar session list</b> follows that same readable step while keeping list density.
             Drop stray <code>font-weight: 650 / 750</code>; converge on two weights, 400 / 500 (regular / emphasis).</p>
             <div class="panel panel-pad" style="margin:16px 0">
               <div class="type-row"><div class="type-sample" style="font-size:22px;font-weight:500">Page Title</div><div class="type-meta">--text-2xl · 22 / 500</div></div>
@@ -280,6 +281,9 @@ onUnmounted(() => {
               <tbody>
                 <tr><td class="tk">--font-ui</td><td class="val">-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC"…</td><td>UI &amp; body (system fonts first)</td></tr>
                 <tr><td class="tk">--font-mono</td><td class="val">JetBrains Mono…</td><td>code, tool names, line numbers, diffs</td></tr>
+                <tr><td class="tk">--base-ui-font-size</td><td class="val">14px user preference</td><td>root setting that drives UI, reading body, and sidebar font sizes</td></tr>
+                <tr><td class="tk">--content-font-size</td><td class="val">calc(base + 1px)</td><td>chat Markdown, message bubbles, composer</td></tr>
+                <tr><td class="tk">--sidebar-ui-font-size</td><td class="val">calc(base + 1px)</td><td>sidebar brand, search, workspace and session rows</td></tr>
                 <tr><td class="tk">--leading-tight/normal/relaxed</td><td class="val">1.25 / 1.5 / 1.7</td><td>headings / UI / long text</td></tr>
                 <tr><td class="tk">--weight-regular/medium</td><td class="val">400 / 500</td><td>body / emphasis</td></tr>
               </tbody>