fix(settings): scope chat font size to the chat markdown surface (#157)

Author: proyectoauraorg

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

@@ -83,7 +83,7 @@ const StyledMarkdown = styled.div`
 		"Helvetica Neue",
 		sans-serif;
 
-	font-size: var(--vscode-font-size, 13px);
+	font-size: var(--zoo-chat-font-size, var(--vscode-font-size, 13px));
 
 	p,
 	li,

webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx

@@ -412,6 +412,37 @@ describe("SettingsView - Sound Settings", () => {
 		)
 	})
 
+	it("saves the selected chat font size and persists null on reset", () => {
+		const { activateTab, getSettingsContent } = renderSettingsView()
+
+		activateTab("ui")
+
+		const content = getSettingsContent()
+		const slider = within(content).getByTestId("chat-font-size-slider")
+
+		// Pick a size, then Save — the boundary should forward it to the host.
+		fireEvent.change(slider, { target: { value: "18" } })
+		fireEvent.click(screen.getByTestId("save-button"))
+
+		expect(vscode.postMessage).toHaveBeenCalledWith(
+			expect.objectContaining({
+				type: "updateSettings",
+				updatedSettings: expect.objectContaining({ chatFontSize: 18 }),
+			}),
+		)
+
+		// Reset clears the override; it is persisted as null (not undefined).
+		fireEvent.click(within(getSettingsContent()).getByTestId("chat-font-size-reset"))
+		fireEvent.click(screen.getByTestId("save-button"))
+
+		expect(vscode.postMessage).toHaveBeenCalledWith(
+			expect.objectContaining({
+				type: "updateSettings",
+				updatedSettings: expect.objectContaining({ chatFontSize: null }),
+			}),
+		)
+	})
+
 	it("shows tts slider when sound is enabled", () => {
 		// Render once and get the activateTab helper
 		const { activateTab, getSettingsContent } = renderSettingsView()

webview-ui/src/index.css

@@ -25,10 +25,10 @@
 @theme {
 	--font-display: var(--vscode-font-family);
 
-	--text-xs: calc(var(--zoo-chat-font-size) * 0.85);
-	--text-sm: calc(var(--zoo-chat-font-size) * 0.9);
-	--text-base: var(--zoo-chat-font-size);
-	--text-lg: calc(var(--zoo-chat-font-size) * 1.1);
+	--text-xs: calc(var(--vscode-font-size) * 0.85);
+	--text-sm: calc(var(--vscode-font-size) * 0.9);
+	--text-base: var(--vscode-font-size);
+	--text-lg: calc(var(--vscode-font-size) * 1.1);
 
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
@@ -254,17 +254,17 @@ html {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	/*
-	 * Base font size for the Zoo Code chat/webview UI. Defaults to VS Code's
-	 * font size so appearance is unchanged unless the user configures the
-	 * "Chat font size" setting, which overrides this variable at runtime.
+	 * Font size for the Zoo Code chat message surface (consumed by MarkdownBlock).
+	 * Defaults to VS Code's font size so appearance is unchanged unless the user
+	 * configures the "Chat font size" setting, which overrides this variable at
+	 * runtime. Scoped to chat rendering so it does not resize settings/other UI.
 	 */
 	--zoo-chat-font-size: var(--vscode-font-size);
 }
 
 body {
 	margin: 0;
 	line-height: 1.25;
-	font-size: var(--zoo-chat-font-size);
 }
 
 body.scrollable,