diff --git a/dashboard/app/dashboard/music/music-client.tsx b/dashboard/app/dashboard/music/music-client.tsx index e68422a..71c9301 100644 --- a/dashboard/app/dashboard/music/music-client.tsx +++ b/dashboard/app/dashboard/music/music-client.tsx @@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react"; import { animate } from "framer-motion"; import { keepPreviousData, useQuery } from "@tanstack/react-query"; +import { useLenis } from "lenis/react"; import type { MusicStats } from "@/types/music-stats"; import { TopArtistsChart } from "./top-artists-chart"; import { ProductivityChart } from "./productivity-chart"; @@ -52,6 +53,7 @@ function fmtListened(ms: number): string { export function MusicClient() { const [range, setRange] = useState("last_7d"); + const lenis = useLenis(); const { data, isLoading, isError, error } = useQuery({ queryKey: ["music-stats", range], @@ -61,6 +63,11 @@ export function MusicClient() { refetchInterval: 60_000, }); + // Charts render after data arrives — tell Lenis the page grew + useEffect(() => { + if (data) lenis?.resize(); + }, [data, lenis]); + return (
{/* Range picker */} diff --git a/dashboard/components/smooth-scroll.tsx b/dashboard/components/smooth-scroll.tsx index 085edec..180d3b4 100644 --- a/dashboard/components/smooth-scroll.tsx +++ b/dashboard/components/smooth-scroll.tsx @@ -14,10 +14,21 @@ const OPTIONS: LenisOptions = { function LenisResizer() { const lenis = useLenis(); const pathname = usePathname(); + useEffect(() => { lenis?.scrollTo(0, { immediate: true }); lenis?.resize(); }, [lenis, pathname]); + + // Recalculate scroll height when lazy-loaded content (charts, data) changes + // body height. html { height: 100% } is fixed at viewport — observe body instead. + useEffect(() => { + if (!lenis) return; + const ro = new ResizeObserver(() => lenis.resize()); + ro.observe(document.body); + return () => ro.disconnect(); + }, [lenis]); + return null; } diff --git a/dashboard/components/timer-field.tsx b/dashboard/components/timer-field.tsx index dffefa4..6a9a0d6 100644 --- a/dashboard/components/timer-field.tsx +++ b/dashboard/components/timer-field.tsx @@ -72,6 +72,10 @@ export function TimerField() { function resize() { c.width = window.innerWidth; c.height = window.innerHeight; + for (const t of timersRef.current) { + t.x = Math.random() * c.width; + t.y = Math.random() * c.height; + } } resize(); window.addEventListener("resize", resize);