Stabilize chat overflow and scroll lock

[DexterStorey]

Motivation

• Prevent transcript overflow and scroll jitter when many messages arrive while preserving the pinned-to-bottom UX.
• Avoid transcript splitting/duplication during streaming by anchoring new text inputs to the correct timeline item.
• Fix layout assumptions around which wrappers should constrain scroll height so the transcript never escapes its container.
• Keep UI changes minimal and deterministic while improving long-message wrapping and visual polish.

Description

• Replace the bottom sentinel approach with a useLayoutEffect that directly sets el.scrollTop = el.scrollHeight when pinned and uses transcripts as the dependency to keep auto-scroll deterministic.
• Remove the unused bottom ref and add layout constraints (overflow-hidden, min-h-0 on containers and scrollbarGutter) to prevent transcript overflow and scrolling anomalies.
• Tweak transcript bubble and input styles (add break-words, adjusted radii, spacing, gradients) for consistent wrapping and visuals.
• Introduce latestTimelineItemIdRef in the realtime provider and use it in sendText to anchor manual text entries to the latest timeline item, preserving ordering and avoiding split/duplicate assistant responses.

Testing

• Ran bun run format (biome) and formatting completed successfully.
• Ran bun run check (biome lint) and no lint errors remain.
• Ran bun x tsc --noEmit and TypeScript type check succeeded with no errors.
• Ran bun run build (Next.js production build) and the project compiled successfully.

---

Codex Task

[vercel]

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

Project	Deployment	Review	Updated (UTC)
lilac	Ready	Preview, Comment	Dec 26, 2025 3:11am