amosblomqvist
4355667d96
Empirically diagnosed via live browser measurement: Source Sans 3's font box is 22px at 16px, but lh-input's 1.25 leading gives a 20px line box - the font's content area sticks 1px below the line, Chromium counts it in scrollHeight, and the zero-padding field-sizing textarea turned it into a permanent 1px scroll: the bar showed EMPTY and at every expansion size below max-h (owner report). The composer and dock fields never showed it because their py-2 absorbs the surplus implicitly. Fix: py-0.5 on the reading field - the same absorption, line-height untouched (the caret law, typography round 2), and the max-h-40 cap still scrolls honestly past 160px of text.
24 lines
1.2 KiB
TypeScript
24 lines
1.2 KiB
TypeScript
import React from "react";
|
|
(globalThis as Record<string, unknown>).React = React;
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, it } from "node:test";
|
|
import assert from "node:assert/strict";
|
|
import { ReadingThinkingField } from "../components/reading-thinking.tsx";
|
|
|
|
describe("the reading-thinking field (owner round, 2026-10-07)", () => {
|
|
it("carries vertical padding — the 1px-scrollbar absorption", () => {
|
|
const html = renderToStaticMarkup(
|
|
<ReadingThinkingField value="" onChange={() => {}} claim={false} />,
|
|
);
|
|
// The fix (empirically diagnosed): Source Sans 3's font box (22px at
|
|
// 16px) exceeds lh-input's 20px line box by 1px; Chromium counts that
|
|
// in scrollHeight and a zero-padding field-sizing textarea becomes a
|
|
// permanent 1px scroll (a bar shown empty AND at every expansion below
|
|
// max-h). py-0.5 absorbs it — the composer/dock fields get the same
|
|
// absorption implicitly from py-2. Line-height stays 1.25 (caret law).
|
|
assert.ok(html.includes("py-0.5"), "the vertical padding is on the textarea");
|
|
// The cap survives: growth past max-h-40 still scrolls honestly.
|
|
assert.ok(html.includes("max-h-40"), "the 160px growth cap stays");
|
|
});
|
|
});
|