feat: Added adjustable font size and line height support for desktop and web.

Signed-off-by: Paolo Insogna <paolo@cowtech.it>

Author: ShogunPanda

packages/app/src/components/settings-general.tsx

@@ -2,6 +2,7 @@ import { Component, Show, createMemo, createResource, onMount, type JSX } from "
 import { createStore } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
+import { NumberStepper } from "@opencode-ai/ui/number-stepper"
 import { Select } from "@opencode-ai/ui/select"
 import { Switch } from "@opencode-ai/ui/switch"
 import { TextField } from "@opencode-ai/ui/text-field"
@@ -584,6 +585,38 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.fontSize.title")}
+          description={language.t("settings.general.row.fontSize.description")}
+        >
+          <div data-action="settings-font-size">
+            <NumberStepper
+              value={settings.appearance.fontSize()}
+              onChange={settings.appearance.setFontSize}
+              min={10}
+              max={24}
+              step={1}
+              format={(value) => value.toFixed(0)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.lineHeight.title")}
+          description={language.t("settings.general.row.lineHeight.description")}
+        >
+          <div data-action="settings-line-height">
+            <NumberStepper
+              value={settings.appearance.lineHeight()}
+              onChange={settings.appearance.setLineHeight}
+              min={1.2}
+              max={4}
+              step={0.1}
+              format={(value) => value.toFixed(1)}
+            />
+          </div>
+        </SettingsRow>
       </SettingsList>
     </div>
   )

packages/app/src/context/settings.tsx

@@ -38,6 +38,7 @@ export interface Settings {
   }
   appearance: {
     fontSize: number
+    lineHeight: number
     mono: string
     sans: string
     terminal: string
@@ -123,6 +124,7 @@ const defaultSettings: Settings = {
   },
   appearance: {
     fontSize: 14,
+    lineHeight: 1.6,
     mono: "",
     sans: "",
     terminal: "",
@@ -158,8 +160,22 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
     createEffect(() => {
       if (typeof document === "undefined") return
       const root = document.documentElement
+      const fontSize = store.appearance?.fontSize ?? defaultSettings.appearance.fontSize
+      const lineHeight = store.appearance?.lineHeight ?? defaultSettings.appearance.lineHeight
       root.style.setProperty("--font-family-mono", monoFontFamily(store.appearance?.mono))
       root.style.setProperty("--font-family-sans", sansFontFamily(store.appearance?.sans))
+      root.style.setProperty("--font-size-base", `${fontSize}px`)
+      root.style.setProperty("--font-size-x-small", `calc(${fontSize}px * 0.85)`)
+      root.style.setProperty("--font-size-small", `calc(${fontSize}px * 0.9)`)
+      root.style.setProperty("--font-size-large", `calc(${fontSize}px * 1.2)`)
+      root.style.setProperty("--font-size-x-large", `calc(${fontSize}px * 1.4)`)
+      root.style.setProperty("--font-size-mono", `${fontSize}px`)
+      root.style.setProperty("--line-height-normal", `${lineHeight * 0.8125}`)
+      root.style.setProperty("--line-height-large", `${lineHeight * 0.9375}`)
+      root.style.setProperty("--line-height-x-large", `${lineHeight * 1.125}`)
+      root.style.setProperty("--line-height-2x-large", `${lineHeight * 1.25}`)
+      root.style.setProperty("--line-height-mono", `${lineHeight}`)
+      root.style.setProperty("--line-height-mono-px", `${fontSize * lineHeight}px`)
     })
 
     createEffect(() => {
@@ -248,6 +264,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setFontSize(value: number) {
           setStore("appearance", "fontSize", value)
         },
+        lineHeight: withFallback(() => store.appearance?.lineHeight, defaultSettings.appearance.lineHeight),
+        setLineHeight(value: number) {
+          setStore("appearance", "lineHeight", value)
+        },
         font: withFallback(() => store.appearance?.mono, defaultSettings.appearance.mono),
         setFont(value: string) {
           setStore("appearance", "mono", value.trim() ? value : "")

packages/app/src/i18n/ar.ts

@@ -573,6 +573,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "خط الواجهة",
   "settings.general.row.uiFont.description": "خصّص الخط المستخدم في الواجهة بأكملها",
+  "settings.general.row.fontSize.title": "حجم الخط",
+  "settings.general.row.fontSize.description": "خصّص حجم الخط الأساسي المستخدم في التطبيق بأكمله",
+  "settings.general.row.lineHeight.title": "ارتفاع السطر",
+  "settings.general.row.lineHeight.description": "خصّص ارتفاع السطر لنص وبرمجيات أكثر قابلية للقراءة",
   "settings.general.row.followup.title": "سلوك المتابعة",
   "settings.general.row.followup.description": "اختر ما إذا كانت طلبات المتابعة توجه فورًا أو تنتظر في قائمة انتظار",
   "settings.general.row.followup.option.queue": "قائمة انتظار",

packages/app/src/i18n/br.ts

@@ -580,6 +580,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Fonte da interface",
   "settings.general.row.uiFont.description": "Personalize a fonte usada em toda a interface",
+  "settings.general.row.fontSize.title": "Tamanho da fonte",
+  "settings.general.row.fontSize.description": "Personalize o tamanho de fonte base usado em todo o app",
+  "settings.general.row.lineHeight.title": "Altura da linha",
+  "settings.general.row.lineHeight.description": "Personalize a altura da linha para texto e código legíveis",
   "settings.general.row.followup.title": "Comportamento de acompanhamento",
   "settings.general.row.followup.description":
     "Escolha se os prompts de acompanhamento orientam imediatamente ou esperam na fila",

packages/app/src/i18n/bs.ts

@@ -645,6 +645,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI font",
   "settings.general.row.uiFont.description": "Prilagodi font koji se koristi u cijelom interfejsu",
+  "settings.general.row.fontSize.title": "Veličina fonta",
+  "settings.general.row.fontSize.description": "Prilagodi osnovnu veličinu fonta koja se koristi u cijeloj aplikaciji",
+  "settings.general.row.lineHeight.title": "Visina reda",
+  "settings.general.row.lineHeight.description": "Prilagodi visinu reda za čitljiv tekst i kod",
   "settings.general.row.followup.title": "Ponašanje nadovezivanja",
   "settings.general.row.followup.description": "Odaberi da li upiti nadovezivanja usmjeravaju odmah ili čekaju u redu",
   "settings.general.row.followup.option.queue": "Red čekanja",

packages/app/src/i18n/da.ts

@@ -640,6 +640,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI-skrifttype",
   "settings.general.row.uiFont.description": "Tilpas skrifttypen, der bruges i hele brugerfladen",
+  "settings.general.row.fontSize.title": "Skriftstørrelse",
+  "settings.general.row.fontSize.description": "Tilpas den grundlæggende skriftstørrelse i hele appen",
+  "settings.general.row.lineHeight.title": "Linjehøjde",
+  "settings.general.row.lineHeight.description": "Tilpas linjehøjden for læsbar tekst og kode",
   "settings.general.row.followup.title": "Opfølgningsadfærd",
   "settings.general.row.followup.description": "Vælg om opfølgende forespørgsler skal styre straks eller vente i kø",
   "settings.general.row.followup.option.queue": "Kø",

packages/app/src/i18n/de.ts

@@ -590,6 +590,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI-Schriftart",
   "settings.general.row.uiFont.description": "Die im gesamten Interface verwendete Schriftart anpassen",
+  "settings.general.row.fontSize.title": "Schriftgröße",
+  "settings.general.row.fontSize.description": "Die im gesamten App verwendete Basisschriftgröße anpassen",
+  "settings.general.row.lineHeight.title": "Zeilenhöhe",
+  "settings.general.row.lineHeight.description": "Die Zeilenhöhe für gut lesbaren Text und Code anpassen",
   "settings.general.row.followup.title": "Verhalten bei Folgefragen",
   "settings.general.row.followup.description":
     "Wählen Sie, ob Folgefragen sofort steuern oder in einer Warteschlange warten",

packages/app/src/i18n/en.ts

@@ -749,6 +749,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI Font",
   "settings.general.row.uiFont.description": "Customise the font used throughout the interface",
+  "settings.general.row.fontSize.title": "Font Size",
+  "settings.general.row.fontSize.description": "Customise the base font size used throughout the app",
+  "settings.general.row.lineHeight.title": "Line Height",
+  "settings.general.row.lineHeight.description": "Customise line height for readable text and code",
   "settings.general.row.followup.title": "Follow-up behavior",
   "settings.general.row.followup.description": "Choose whether follow-up prompts steer immediately or wait in a queue",
   "settings.general.row.followup.option.queue": "Queue",

packages/app/src/i18n/es.ts

@@ -648,6 +648,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Fuente de la interfaz",
   "settings.general.row.uiFont.description": "Personaliza la fuente usada en toda la interfaz",
+  "settings.general.row.fontSize.title": "Tamaño de fuente",
+  "settings.general.row.fontSize.description": "Personaliza el tamaño de fuente base usado en toda la app",
+  "settings.general.row.lineHeight.title": "Altura de línea",
+  "settings.general.row.lineHeight.description": "Personaliza la altura de línea para texto y código legibles",
   "settings.general.row.followup.title": "Comportamiento de seguimiento",
   "settings.general.row.followup.description":
     "Elige si los prompts de seguimiento se dirigen inmediatamente o esperan en una cola",

packages/app/src/i18n/fr.ts

@@ -587,6 +587,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Police de l'interface",
   "settings.general.row.uiFont.description": "Personnaliser la police utilisée dans toute l'interface",
+  "settings.general.row.fontSize.title": "Taille de police",
+  "settings.general.row.fontSize.description": "Personnaliser la taille de police de base utilisée dans toute l'app",
+  "settings.general.row.lineHeight.title": "Hauteur de ligne",
+  "settings.general.row.lineHeight.description": "Personnaliser la hauteur de ligne pour un texte et du code lisibles",
   "settings.general.row.followup.title": "Comportement de suivi",
   "settings.general.row.followup.description":
     "Choisissez si les messages de suivi dirigent immédiatement ou attendent dans une file d'attente",