[WIP] fix(look): compute exact timeline row height so rows stop shifting on scroll - #562
Conversation
… scroll The virtualized timeline estimated every photo row at a flat 220px, but the real square-tile row height is width/columns (~291px desktop, ~174px mobile). Off-screen rows were mispositioned then snapped when measured — the blank → blurry → resize jank on scroll. Read the live grid width from the DOM and compute the exact height instead, so measureElement finds nothing to correct. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
look | dd1da76 | Commit Preview URL Branch Preview URL |
Jul 26 2026, 10:13 AM |
|
Warning Review limit reached
Next review available in: 49 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe home-page photo grid now calculates virtualized row heights from the rendered content width, column count, gap, and padding. A content ref supplies live width data, while unit tests cover calculation and fallback behavior. ChangesPhoto row sizing
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. @@ Coverage Diff @@
## main #562 +/- ##
==========================================
- Coverage 92.62% 92.61% -0.01%
==========================================
Files 326 326
Lines 5735 5741 +6
Branches 1222 1223 +1
==========================================
+ Hits 5312 5317 +5
- Misses 423 424 +1
... and 1 file with indirect coverage changes Continue to review full report in Codecov by Harness.
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/look/home-page/container/index.tsx`:
- Around line 70-90: Update the virtualizer setup around estimateSize and
virtualizer to invalidate cached row measurements whenever the layout inputs
contentWidth or columns change, using virtualizer.measure() or the established
equivalent. Ensure offscreen rows recalculate their heights after width or
column changes, and add a regression test covering this layout-driven
invalidation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 7f7f5943-c571-4010-a8af-2da26e959e47
📒 Files selected for processing (3)
packages/ui/src/look/home-page/container/index.tsxpackages/ui/src/look/home-page/utils.test.tspackages/ui/src/look/home-page/utils.ts
…hange measureElement caches each row's measured height; a window resize or breakpoint flip changes the true row height, but offscreen rows kept the stale cached value until re-render, drifting scroll offsets. Observe the live grid width and call virtualizer.measure() when the computed row height changes, dropping the cache so every row re-estimates. Addresses CodeRabbit review on #562. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 participant
Summary
Fixes SWO-634. Scrolling the Look photo timeline was janky: a row would show blank space, then blurry placeholder tiles at the wrong height, then snap/resize to its final square. That's a layout shift, and it contradicts the "zero layout shift" goal from SWO-607.
Cause: the virtualized grid estimated every photo row at a flat
220px, but a real row of square tiles isgridWidth ÷ columnstall — ~291px on desktop, ~174px on mobile. Every off-screen row was positioned with the wrong height, then jumped whenmeasureElementreported the real one.Fix: compute the exact row height from the live grid width instead of guessing. Every tile is a perfect square (
aspectRatio: 1/1), so the height is fully determined by the content width, the column count, and the grid gap. Arefon the grid feeds its real width intoestimateSize, so the estimate matches what's rendered and there's nothing left to correct. The virtualizer already re-runs the estimate on scroll and resize, so no observer/effect is needed — it tracks breakpoint and window changes on its own.220pxstays only as the pre-measurement first-paint fallback.photoRowHeight()— new pure, unit-tested helper inhome-page/utils.tscontainer/index.tsx— reads the live grid width inestimateSizeTest plan
PhotoTimelineContainer/Populatedstory: fast-scroll and window-resize no longer show rows resizing/snapping — rows land at final height on first paint.photoRowHeightunit tests (gaps, single column, width-unknown fallback) — pass.pnpm --filter ui typecheck, Biome lint on changed files, and the utils test suite all pass.Manual check for a reviewer: open Look, scroll the timeline fast on both a wide window and a narrow (mobile-width) one — rows should not jump or resize as they enter.
🤖 Generated with Claude Code
Summary by CodeRabbit