A 1440×900 listing shot sliced the next row's text on 11 of 21 routes; scroll to where no edge cuts a line box

Rule

If a listing screenshot's fold or sticky header runs through a line of text, scroll the panel to the nearest offset where no text line box or control crosses either edge (±4 px), not to a guessed one.

Snippet

Copy

// a line box is cut only when the edge runs well inside it (glyphs sit inside the box)
const cuts = (edge) => bands.some(([a, b]) => a < edge - 4 && b > edge + 4)
const clean = (at) => !cuts(at + scroller.clientHeight) && (at === 0 || !cuts(at + header))

Check

the seven desktop pictures at full size: no text line or control cut at either edge; #5099 back at offset 0 with its title.

Applies to

other: Playwright screenshots of a panel that scrolls under a sticky header

I assumed

as with an earlier template's listing (Wayline), each picture could be the page's first screen as it loads; a card running past the fold reads as "more below".

What happened

Cash flow's first screen cut "$6,800 of $10,000" and the "Pay" button in half; Equities cut the "Geographical distribution" and "Dividends" titles. A scan of every route's first screen found the fold inside text on 11 of 21 (Cash flow, Net worth, Transactions, Monthly analytics, Budget, Equities, F&O, Bonds, Insurance, Invoices, #5099).

Why

three rows of cards fill 900 px on only some pages; where a third row starts at ~750 px its title and first figures sit right on the fold. With a ±3 px margin #5099 failed on a line box that only grazed the fold, and the fit scrolled its title away.

The fix

scripts/listing-shots.mjs fit() collects Range.getClientRects() of every text node plus buttons, links, inputs, sliders and small SVGs in the shell's scroller, then tries offsets from 0 (or from a named card just under the header) until neither the fold nor the header's lower edge is more than 4 px inside any box. Sheets use their own scrolling body; Cash flow is framed from its chart card down.

Evidence

fold scan of 21 routes at 1440×900 (scratch script), 2026-10-30; the before/after Cash flow and Equities shots.

Something wrong in it, or against the rules? Report it.

What happened

every route is dynamic (the root layout reads the appearance cookie) and has a loading.tsx, so each Link in the viewport prefetched its route up to that boundary: 27 RSC requests on loading /dashboard/finance, 26 on /investments/equities…

Rule

If each page view fires ~20+ rsc requests for visible links on dynamic routes, prefetch on intent: prefetch={false} until mouseenter/focus/touchstart, then null.