Making cards peek above the fold on every screen
A small layout problem with a fiddly answer: measure, don't estimate, and never trust a single laptop.
The design called for the top of a card deck to peek above the bottom of the first screen — an invitation to scroll. On the laptop it was designed on, a fixed margin did the job. On a short screen the deck vanished below the fold; on a tall monitor half of it was on screen before anyone touched the wheel.
Why the estimate failed
My first attempt computed the hero's height, subtracted it from the viewport and called it a day. Text reflow ruins that: shrink the hero slightly and a headline rewraps from three lines to two, so height does not change linearly with scale.
- Measure the real laid-out position instead of predicting it.
- Search for the fit with a handful of bisection passes rather than solving it.
- Re-measure after the entrance animations settle, or you measure a transform mid-flight.
The last one cost me an afternoon. Neutralising transforms inside a measurement pass — applied and removed within the same frame, so nothing is ever painted — turned an off-by-24-pixels bug into an exact fit.
If a layout depends on a number you guessed, it works on your machine by definition.