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

Plan-graph refinement round 1 (owner): chat-font zoom cap + stroke-safe padding

Browse Source 
In-chat full plan block:
- TEXT_CAP_SCALE (16.5/12.5): node text renders at text-xs in svg units;
  the block now carries maxWidth = extent × cap + mx-auto, so it still
  fills the column whenever the column is narrower than the cap, but
  never scales node text past the chat prose size (--lh-prose-size).
- GRAPH_PAD (8 svg units) around the full-extent viewBox: centered
  strokes (half outside the geometry) and the −4 glow halo were clipping
  at the frame edges — the padded origin (-8,-8) keeps all ink visible.
  Only the full-extent render pads; the plan window's override viewport
  and the popup's fit margins are untouched.
Test pins updated: mx-auto + max-width:232.32px + viewBox='-8 -8 176 152'.
This commit is contained in:
amosblomqvist
2026-09-14 06:22:26 +03:00
parent d7195e3659
commit fdeacc42f5
2 changed files with 48 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/render-plan-block.test.tsx
+8 -5
View File
@@ -82,11 +82,14 @@ describe("plan block render", () => {
assert.match(html, /data-testid="plan-block-full"/);
// Borderless: the wrapper carries no border/rounded chrome.
assert.ok(!/data-testid="plan-block-full"[^>]*border/.test(html), "no wrapping chrome");
// Fills the column: the svg is w-full with the layout extent as viewBox
// (leftmost/rightmost nodes hug the edges), height natural.
assert.match(html, /<svg[^>]*class="block h-auto w-full"/);
// Two stacked nodes: 2*NODE_H + GAP_Y = 136 natural height, width = one node column.
assert.match(html, /viewBox="0 0 160 136"/);
// Fills the column UP TO the chat-font cap: the svg is w-full +
// mx-auto with maxWidth = extent × TEXT_CAP_SCALE, so node text never
// renders past the 16.5px prose size (owner, plan-graph round 1).
assert.match(html, /<svg[^>]*class="block h-auto w-full mx-auto"/);
assert.match(html, /max-width:232\.32px/); // (160+16) × 1.32
// Two stacked nodes: 2*NODE_H + GAP_Y = 136 extent + GRAPH_PAD on
// every side (strokes/glow never clip at the edges).
assert.match(html, /viewBox="-8 -8 176 152"/);
// Snapshot statuses render as carried.
assert.match(html, /data-testid="plan-node-a" data-status="visited"/);
assert.match(html, /data-testid="plan-node-b" data-status="upcoming"/);