artifact: fix the-draft-race (speedup readout overlapped throughput/caption)

[blokzdev]

Problem

In the the-draft-race artifact (THE DRAFT RACE), the bottom "readout" of the race chart was unreadable: the big centered speedup number (e.g. 2.40×) rendered directly on top of the live throughput counters (AR 5.8 tok / SD 13.9 tok) and the speedup caption. Reported from mobile inline; reproduced in fullscreen on both mobile and desktop.

Before (overlap)
2.40× overprints tok / SD, all three text layers stacked on one baseline

Root cause

In src/islands/artifacts/the-draft-race.ts, the readout block anchored all three text elements to the same Y, spY = H * 0.88:

• the big number — textBaseline:'middle', font 22–36px, centered at cx, spY;
• the throughput counters — flanking it at only cx ± 18, spY;
• the caption — just below.

The number is far wider than the 18px flank gap, so it overprinted the counters horizontally and shared their baseline vertically. Compounding it, the lanes used fixed full-height fractions (LANE_Y2 = H*0.62, LANE_H up to 56), so on the ~200px-tall mobile stage (stageAspect:'3/2') the readout band also collided with the SD lane — three ~24px rows could not fit in the ~21px left below the lanes.

Fix

All changes are inside draw() — no API / manifest / layout-primitive changes:

1. Reserve a bottom band of height clamp(46, 76, H*0.27) for the readout, and fit the two lanes into the space above it (LANE_Y1/LANE_Y2/LANE_H recomputed against laneZone). drawToken and the lane/label/phase-label code take these as inputs, so they follow automatically.
2. Stack the readout into three distinct rows — throughput / big number / caption — each with its own baseline, vertically centered in the band, with fonts scaled to the band. The shared spY anchor is gone.

Scope

Not systemic — a survey of all canvas artifacts found only this one had the bug; the other three (attention-lens, dispute-bisection, falsifier-gate) already reserve space, and the DOM/SVG artifacts position via percentages/viewBox/transforms.

Verification

• npm run check && npm run build pass.
• Readout now shows three clean rows (AR … / SD …, then N.NN×, then speedup) with no overlap between them or with the SD lane / VERIFYING / phase label; holds across slider ranges and from mobile width (~320px) to wide desktop, inline and fullscreen.

🤖 Generated with Claude Code

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blokz	Building	Preview, Comment	Jun 24, 2026 4:31am