ct-public/isparkclaw-webui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(appearance): font size setting now visibly scales UI text (closes #843)

Browse Source 
* fix(appearance): font size setting now visibly scales UI text

Root cause: the original CSS override only changed :root{font-size} which
has no effect on the 232+ hardcoded px values throughout style.css. Only
the ~49 em/rem values were affected, which are not the main visible text.

Fix: add explicit px overrides for the key UI surfaces under each
data-font-size attribute selector:
  - .msg-body (chat messages) + headings, code, tables
  - .session-item, .session-meta (sidebar session list)
  - #msg (composer textarea)
  - .file-item (workspace file tree)

The :root override is kept so em/rem cascade correctly, but the targeted
element overrides are what actually make the text visibly larger/smaller.

Also: 8 new regression tests lock in the targeted CSS rules so this
cannot silently regress again.

* fix: composer large font was no-op — bump to 18px (default is 16px)

---------

Co-authored-by: nesquena-hermes <nesquena-hermes@users.noreply.github.com>
This commit is contained in:
nesquena-hermes
2026-04-21 23:39:39 -07:00
committed by GitHub
parent db57c47ff3
commit 85434dd03c
3 changed files with 108 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
static/style.css
View File

@@ -12,8 +12,47 @@
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
}
/* ── Font size modifiers ── */
:root[data-font-size="small"]{font-size:12px;}
:root[data-font-size="large"]{font-size:16px;}
/* ── Font size preference: scale key UI text elements ── */
/* Default is 14px (no attribute needed). Small=12px, Large=16px. */
/* We override the px values directly on key containers since most of the */
/* stylesheet uses hardcoded px — changing :root font-size alone only affects */
/* the small number of em/rem values. */
/* Sidebar session list */
:root[data-font-size="small"] .session-item { font-size: 11px; }
:root[data-font-size="large"] .session-item { font-size: 15px; }
:root[data-font-size="small"] .session-meta { font-size: 10px; }
:root[data-font-size="large"] .session-meta { font-size: 13px; }
:root[data-font-size="small"] .session-title-input { font-size: 11px; }
:root[data-font-size="large"] .session-title-input { font-size: 15px; }
/* Chat message body */
:root[data-font-size="small"] .msg-body { font-size: 12px; }
:root[data-font-size="large"] .msg-body { font-size: 16px; }
:root[data-font-size="small"] .msg-body h1 { font-size: 15px; }
:root[data-font-size="large"] .msg-body h1 { font-size: 21px; }
:root[data-font-size="small"] .msg-body h2 { font-size: 13px; }
:root[data-font-size="large"] .msg-body h2 { font-size: 19px; }
:root[data-font-size="small"] .msg-body h3 { font-size: 12px; }
:root[data-font-size="large"] .msg-body h3 { font-size: 16px; }
:root[data-font-size="small"] .msg-body code { font-size: 10.5px; }
:root[data-font-size="large"] .msg-body code { font-size: 14.5px; }
:root[data-font-size="small"] .msg-body pre code { font-size: 11px; }
:root[data-font-size="large"] .msg-body pre code { font-size: 15px; }
:root[data-font-size="small"] .msg-body table { font-size: 11px; }
:root[data-font-size="large"] .msg-body table { font-size: 14px; }
/* Composer textarea (default is 16px in stylesheet) */
:root[data-font-size="small"] #msg { font-size: 14px; }
:root[data-font-size="large"] #msg { font-size: 18px; }
/* Workspace file tree */
:root[data-font-size="small"] .file-item { font-size: 11px; }
:root[data-font-size="large"] .file-item { font-size: 14px; }
/* App-level base — keeps em/rem values scaling correctly */
:root[data-font-size="small"] { font-size: 12px; }
:root[data-font-size="large"] { font-size: 16px; }
/* ── Dark mode — navy-black + gold accent matching Hermes terminal ── */
:root.dark {
--bg:#0D0D1A;--sidebar:#141425;--border:#2A2A45;--border2:rgba(255,255,255,0.14);