feat(lint): add text_truncated check for content clipped by overflow-hidden containers

[xuanruli]

The gap

The layout audit's overflow detectors compare bounding boxes: overflowFor(subject, container, …) fires only when a subject's bbox extends beyond its container's. But when text is clipped by an overflow:hidden ancestor (with or without text-overflow:ellipsis), getBoundingClientRect returns the already-clipped box, constrained to the container. The bbox comparison sees no spill, so the lost content is invisible to every existing check — no scrollWidth/clientWidth-based truncation detection existed.

The fix

A new browser-side detector (textTruncationIssues in layout-audit.browser.js) flags text-bearing elements where scrollWidth > clientWidth (horizontal) or scrollHeight > clientHeight (vertical) and a clipping element — the element itself or an ancestor below the composition root — actually hides that overflow (clipsOverflow). It:

• reports the innermost truncated box per nesting chain (a clipping container and the text child that overflows it both trip the check; only the child is reported)
• defers self-clipping elements that own their text to the existing clipped_text check (no double-report)
• respects data-layout-allow-overflow/data-layout-bleed and adds an explicit data-layout-allow-truncation opt-out
• emits text_truncated at warning severity (matches the text_box_overflow posture — a clipped label is a real defect but not render-breaking), with a snippet, selector, container selector and fix hint

Wired through the same path as the sibling layout findings: browser detector → checkBrowser.ts parser allowlist → LayoutIssueCode union + persistence tiering in layoutAudit.ts → checkPipeline.

Eval

Ran the built CLI (check <sample> --json) against the 4 rendered discovery samples the current check misses, plus clean controls:

Sample	Defect	text_truncated fires?
w3/fuzz000	concept-hub node labels ("Microgrid Active", "Vertical Farming", "100% Recycled")	✅ 3 findings on div.satellite-val (content width 144px > visible 126px)
w6/fuzz007	gantt bar status labels ("ACTIVE IN-PROGRE…", "Full Thrust Burn…")	✅ 4 findings on .task-bar (content width 418px > visible 346px)
w3/fuzz007	matrix quadrant/axis labels clipped vertically	✅ 4 findings on div.quad-title (content height 35px > visible 31px) — vertical truncation
w2/fuzz008	kanban DONE column, bottom card clipped	❌ not fired — see note

3 of 4 fire, and vertical truncation is covered (w3/fuzz007). The kanban miss is honest: its DONE column has no overflow:hidden and no height cap — it grows and its bottom card is cut by the canvas root edge. That is a bbox-extends-past-canvas defect (canvas_overflow's mechanism), not scrollWidth > clientWidth content-box truncation; no element there has content overflowing its own clipped box. Forcing it would duplicate canvas_overflow and risk false positives, so it is intentionally out of scope for this check.

Clean controls — no false positives: w1/fuzz003, w5/fuzz000, w5/fuzz002 all report text_truncated: 0.

Tests

Added to layout-audit.browser.test.ts: positive horizontal + vertical truncation under a clipping ancestor, negatives for text that fits and for overflow into a non-clipping container (visible, not lost), a no-double-report guard vs clipped_text, and opt-out guards for data-layout-allow-truncation and data-layout-allow-overflow. Full file: 78 tests pass; tsc --noEmit clean.

🤖 Generated with Claude Code

[xuanruli]

• feat(lint): add text_truncated check for content clipped by overflow-hidden containers #2767 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.