sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

ui: round three — the tight band, one geometry everywhere

Browse Source 
Owner round three on the user rows: (1) the band padding halves,
py-2.5 -> py-[5px] — subtle, not tall; same for the messages. (2) The
in-card thinking joins the band: identical styling and heights for
collapsed thinking in the chat and inside question cards (card-on-card
is quiet by design; revert if it reads too light). (3) The left gap
MATCHES the new 5px padding, so the rail fills the rest of the 3ch
inset - border-l-[calc(3ch-5px)] pl-[5px]: a thick muted rail, total
inset still 3ch (the chevron-alignment law survives). The banded prop
dies - one geometry, cards included.
This commit is contained in:
amosblomqvist
2026-10-08 18:32:21 +03:00
parent 3691e07118
commit 497b29804c
6 changed files with 39 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/render-cards.test.tsx
+5 -4
View File
@@ -295,13 +295,14 @@ describe("render smoke tests", () => {
// trigger row only — the thinking text is one click away, never loud.
assert.ok(html.includes('data-testid="your-thinking-trigger"'), "the trigger row");
assert.ok(html.includes('aria-expanded="false"'), "arrives collapsed");
// IN-CARD = RAIL ONLY (owner round two, 2026-10-07): no band on the
// card's own background; geometry alone carries it there.
// IDENTICAL GEOMETRY (owner round three, 2026-10-07): the in-card row
// carries the band too — collapsed thinking matches in height
// everywhere, card or chat.
const yourRow = html.slice(html.indexOf('data-testid="your-thinking"'));
assert.ok(!yourRow.slice(0, 400).includes("bg-card"), "no band inside the card");
assert.ok(yourRow.slice(0, 400).includes("bg-card"), "the band inside the card as well");
// THE RAIL GROUPS (owner correction): the label sits INSIDE the rail —
// ownership readable from the rail alone, collapsed or expanded.
const railAt = html.indexOf("border-l-[6px]");
const railAt = html.indexOf("border-l-[calc(3ch-5px)]");
const trigAt = html.indexOf("your-thinking-trigger");
assert.ok(railAt !== -1 && railAt < trigAt, "the rail opens before the label (same quote)");
assert.ok(!html.includes("brightness isn&#x27;t distance"), "the text is hidden until expanded");