Skip to content

fix: prod scroll resize, timer viewport reinit#30

Merged
BODMAT merged 4 commits into
developmentfrom
fix/scroll-prod-lenis
Jun 3, 2026
Merged

fix: prod scroll resize, timer viewport reinit#30
BODMAT merged 4 commits into
developmentfrom
fix/scroll-prod-lenis

Conversation

@BODMAT

@BODMAT BODMAT commented Jun 3, 2026

Copy link
Copy Markdown
Owner

What

Two production bugs fixed: Lenis scroll height was not recalculated after lazy-loaded charts rendered on /dashboard/music (visible only with real DB latency), and background timer field positions were not redistributed after viewport resize (mobile ↔ desktop), causing all timers to cluster on one side.

Changes

Code

  • dashboard/components/smooth-scroll.tsxResizeObserver on document.body (not documentElement, which is fixed at viewport height via h-full) to call lenis.resize() automatically when page content grows
  • dashboard/app/dashboard/music/music-client.tsx — direct lenis.resize() via useLenis() when query data arrives, as a second layer for the music page specifically
  • dashboard/components/timer-field.tsx — on viewport resize, reinitialize timer x/y positions randomly across new dimensions (drift speed ~3px/s is too slow to redistribute naturally)

Tooling / config

  • n/a

Docs / plan

  • n/a

Design decisions

  • document.body instead of document.documentElementhtml { height: 100% } (Tailwind h-full in layout) locks offsetHeight to viewport; ResizeObserver never fires on it
  • Dual-layer scroll fix (ResizeObserver + direct call in MusicClient) — ResizeObserver is generic but async; direct call on data change guarantees correct timing for the music page after Neon latency
  • Timer reinit over position scaling — scaling compressed all positions into a small range; random scatter is instant and unnoticeable on a subtle decorative background

Verification

  • npx tsc --noEmit (dashboard) — clean
  • npm run lint (dashboard) — clean
  • Manual: npm run build && npm start + 3G throttle + CPU 4× + Disable cache → /dashboard/music direct URL — scroll reaches bottom after charts load
  • Manual: DevTools responsive mode → toggle mobile ↔ desktop → timers redistribute across full viewport

Out of scope (future PRs)

  • n/a

Closes

  • n/a (prod bugfix)

@vercel

vercel Bot commented Jun 3, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
worktrace Ready Ready Preview, Comment Jun 3, 2026 11:43am

@BODMAT BODMAT merged commit 2e16114 into development Jun 3, 2026
4 checks passed
@BODMAT BODMAT deleted the fix/scroll-prod-lenis branch June 3, 2026 11:47
BODMAT added a commit that referenced this pull request Jun 3, 2026
fix: prod scroll + timer viewport reinit (#30)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant