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

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",

packages/app/src/i18n/ja.ts

@@ -577,6 +577,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UIフォント",
   "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":
     "フォローアッププロンプトを即座に実行するか、キューで待機させるかを選択します",

packages/app/src/i18n/ko.ts

@@ -574,6 +574,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI 글꼴",
   "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/no.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": "UI-skrift",
   "settings.general.row.uiFont.description": "Tilpass skrifttypen som brukes i hele grensesnittet",
+  "settings.general.row.fontSize.title": "Skriftstørrelse",
+  "settings.general.row.fontSize.description": "Tilpass den grunnleggende skriftstørrelsen som brukes i hele appen",
+  "settings.general.row.lineHeight.title": "Linjehøyde",
+  "settings.general.row.lineHeight.description": "Tilpass linjehøyden for lesbar tekst og kode",
   "settings.general.row.followup.title": "Oppfølgingsadferd",
   "settings.general.row.followup.description": "Velg om oppfølgingsspørsmål skal kjøres umiddelbart eller vente i kø",
   "settings.general.row.followup.option.queue": "Kø",

packages/app/src/i18n/pl.ts

@@ -579,6 +579,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Czcionka interfejsu",
   "settings.general.row.uiFont.description": "Dostosuj czcionkę używaną w całym interfejsie",
+  "settings.general.row.fontSize.title": "Rozmiar czcionki",
+  "settings.general.row.fontSize.description": "Dostosuj bazowy rozmiar czcionki używany w całej aplikacji",
+  "settings.general.row.lineHeight.title": "Wysokość wiersza",
+  "settings.general.row.lineHeight.description": "Dostosuj wysokość wiersza dla czytelnego tekstu i kodu",
   "settings.general.row.followup.title": "Zachowanie kontynuacji",
   "settings.general.row.followup.description": "Wybierz, czy kontynuacja ma być natychmiastowa, czy czekać w kolejce",
   "settings.general.row.followup.option.queue": "Kolejka",

packages/app/src/i18n/ru.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": "Шрифт интерфейса",
   "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":
     "Выберите, отправлять ли уточняющие вопросы сразу или помещать их в очередь",

packages/app/src/i18n/th.ts

@@ -639,6 +639,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "ฟอนต์ UI",
   "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/tr.ts

@@ -652,6 +652,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Arayüz Yazı Tipi",
   "settings.general.row.uiFont.description": "Arayüz genelinde kullanılan yazı tipini özelleştirin",
+  "settings.general.row.fontSize.title": "Yazı tipi boyutu",
+  "settings.general.row.fontSize.description": "Uygulama genelinde kullanılan temel yazı tipi boyutunu özelleştirin",
+  "settings.general.row.lineHeight.title": "Satır yüksekliği",
+  "settings.general.row.lineHeight.description": "Okunabilir metin ve kod için satır yüksekliğini özelleştirin",
   "settings.general.row.followup.title": "Takip davranışı",
   "settings.general.row.followup.description":
     "Takip komutlarının hemen yönlendirilmesini mi yoksa sırada beklemesini mi istediğinizi seçin",

packages/app/src/i18n/zh.ts

@@ -639,6 +639,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/zht.ts

@@ -634,6 +634,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/console/app/src/routes/workspace/[id]/billing/payment-section.module.css

@@ -70,7 +70,7 @@
       th,
       td {
         padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
       }
 
       th {

packages/console/app/src/routes/workspace/[id]/keys/key-section.module.css

@@ -174,7 +174,7 @@
       th,
       td {
         padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
       }
 
       th {