Skip to content

Add adjustable text scale setting for better readability on smaller screens #1232

@knowsuchagency

Description

@knowsuchagency

Problem

When working on a laptop, users often need to zoom out the browser to view code diffs effectively. However, this makes text in conversations, chat messages, and logs too small to read comfortably. Increasing browser zoom makes buttons and UI controls disproportionately large.

Solution

Add a Text Scale slider in Settings → General → Appearance that allows users to independently scale text content (conversations, diffs, logs, markdown) from 1.0x to 2.0x while keeping UI controls (buttons, inputs, navigation) at their normal size.

Implementation Details

Backend

  • New text_scale: f32 field in Config v8 (default: 1.0)
  • Automatic migration from v7 to v8

Frontend

  • Slider component in Settings → Appearance
  • Dynamic CSS variable injection via useTextScale hook
  • CSS rules target specific text content classes
  • Live preview of scale value (e.g., "1.3x")
  • Persists to backend config

Benefits

  • Solves laptop viewing problem without affecting UI layout
  • User-friendly single slider (not overwhelming)
  • Changes apply immediately without page reload
  • Maintains clean UI proportions

Testing

  • ✅ Backend compiles successfully
  • ✅ Frontend TypeScript compiles without errors
  • ✅ No new linter warnings
  • ✅ Config migration from v7 to v8 works

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions