BuildMidFrontendAuto-graded

Stop a virtual list clipping its last row

One row off either hides content or crashes the page, so exactness at the edges is the entire measure.A virtualised list renders only the rows currently on screen rather than mounting all of them, and the one piece of maths that makes it work is visible_window(): given the scroll position and viewport height, return the range of item indices to render plus the spacer offset and the total height the scrollbar needs. The shipped version is wrong in the classic ways, including an off-by-one on the end index that clips the last visible row.

30 min

python

Start lab

You're done when

The end index includes the last partially visible row rather than clipping it.
With overscan, the window still clamps to the list at the very top and the very bottom.
The spacer offset matches the first rendered index, so rows sit in the right place.
The reported total height reflects the full list, so the scrollbar is proportioned correctly.

What it measures

Frontend developmentGetting virtualisation arithmetic right, where a small error is immediately visible as a clipped or misaligned row.

Frontend testingVerifying the window at the boundaries — first screen, last screen, partial rows — rather than mid-scroll only.

Off-by-one disciplineReasoning carefully about inclusive versus exclusive bounds, which is the whole defect class here.

Your environment

Terminal + editorA full shell in the browser

Claude CodePre-authenticated, no key setup

Isolated microVMYours alone, wiped afterwards

Start this lab

30 min

Start labYou'll sign in to Anthropos to start. The lab opens in a private cloud workspace with Claude Code ready to use.

AI Labs is part of Anthropos Workforce. Not on your plan yet? Book a demo