From 5e6d5f124c70441cdbf7fc4e81c5dd49d49f2173 Mon Sep 17 00:00:00 2001 From: amosblomqvist Date: Thu, 17 Sep 2026 13:15:35 +0300 Subject: [PATCH] Typography round 2 (owner): lh-input (caret at the font-metric floor) + 14px session titles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - lh-input: lh-prose's 1.5 reading leading made typing carets tower (~25px box on 16.5px text, ~2.1× the glyphs — the caret fills the line box in Chromium). Inputs are not paragraphs: 1.25 leading drops the caret to ~21px, the font-metric floor (as close to the glyphs as Chromium will draw). Swapped on every typing surface — composer (chat + home), the thinking field, answer + editable-Other inputs, the model search; rendered prose (message.tsx container, option descriptions, chat.tsx pre-wrap) keeps lh-prose 1.5. Same family and size as prose; only leading differs. - Session titles: 14px (text-base) — Source Sans at 12.5px read as small as the 11px mono meta under them; the title now holds its rank. Live: title "Source Sans 3" 14px vs meta "JetBrains Mono" 11px, row 52px; composer line box 20.625px (was 24.75px). Gates: typecheck, lint, 469/469. --- app/globals.css | 13 +++++++++++++ components/composer.tsx | 2 +- components/home.tsx | 2 +- components/model-picker.tsx | 2 +- components/question-dock.tsx | 6 +++--- components/sidebar.tsx | 2 +- 6 files changed, 20 insertions(+), 7 deletions(-) diff --git a/app/globals.css b/app/globals.css index ca56ace..abffdab 100644 --- a/app/globals.css +++ b/app/globals.css @@ -164,6 +164,19 @@ body { color: var(--lh-ink-italic); } +/* lh-input (owner, typography round 2): lh-prose's 1.5 READING leading + makes typing carets tower over the glyphs — the caret fills the line + box (24.75px at 16.5px text, ~2.1× the glyph height). Inputs are not + paragraphs: a tighter 1.25 leading brings the caret to the font-metric + floor (~21px, as close to the glyphs as Chromium will draw it) while + wrapped lines in growing textareas still read fine. Rendered prose keeps + 1.5 — the two share family and size, they differ only in leading. */ +.lh-input { + font-family: var(--font-prose); + font-size: var(--lh-prose-size); + line-height: 1.25; +} + /* Thin dark native scrollbar (app-wide): dark thumb, transparent track. */ * { scrollbar-width: thin; diff --git a/components/composer.tsx b/components/composer.tsx index f2e7420..ea1dffa 100644 --- a/components/composer.tsx +++ b/components/composer.tsx @@ -59,7 +59,7 @@ export function Composer({ placeholder="Ask, answer, or steer the lesson…" autoFocus={autoFocus} rows={1} - className="field-sizing-content lh-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground" + className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground" /> {verdict && !busy ? ( // The plan verdict (docs/probe-teach-split.md §4): accept diff --git a/components/home.tsx b/components/home.tsx index 5e5885b..30a3053 100644 --- a/components/home.tsx +++ b/components/home.tsx @@ -91,7 +91,7 @@ export function Home() { placeholder="What do you want to learn?" autoFocus rows={1} - className="field-sizing-content lh-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground" + className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground" />