@github: Rendering a million-line diff is the easy part. Comments are what break it. Their height depends on markdown wrapping, …

Rendering a million-line diff is the easy part. 👀

Comments are what break it. Their height depends on markdown wrapping, expanded details, open reply boxes, and images still loading (none of which you know until you render).

Here’s how we rebuilt the PR view in the GitHub Copilot app 🧵

A code row is a line at a known height. You can compute the whole geometry up front and never have to correct it.

Comments don’t have a predictable height. So we stopped forcing one geometry to serve both, and split the document into two independent height domains.

For the first design, we gave every dynamic block a ResizeObserver that wrote measured heights back into the layout.

We built it, then rejected it. An observer that writes a height back into the layout it’s watching can retrigger itself, and the cost grows with every mounted block.

What we shipped is a recurring measurement pass, gated on idle and scoped to roughly 2400px around the viewport. Mounted blocks are ground truth. Observers normally only flag a block for the pass. They don’t write heights themselves.

There’s one exception: a visible block resizing because of the user’s action can apply one synchronous correction before paint. That keeps the comment and code below it moving together without reopening the feedback loop.

One bug that held us back was “don’t correct while you’re scrolling.” It was a timestamp guard, and our own programmatic scrolls refreshed it.

Toggle the sidebar, and the diff pane changes width. Wrapped lines reflow, and the surface emits a small scroll as it settles. The guard read that as your input and skipped the correction meant to keep your place. The file you were reading drifted off screen.

Any “is the user interacting?” check has to distinguish real user input from scrolls caused by your own side effects.

Open the worst pull request you’ve got and try it out 👇