fix(site): auto-scroll detail panel into view on mobile when a measure is selected

[Copilot]

On mobile (≤ 1080 px, single-column layout), the MeasureDetailPanel renders below the measure grid. Selecting a measure updates the panel content but leaves it off-screen, requiring a manual scroll.

Changes

• MeasureDetailPanel — adds a useRef/useEffect that calls scrollIntoView whenever measure changes, gated on window.innerWidth <= 1080 (matching the CSS breakpoint where the layout collapses to one column). On desktop the panel is already visible in its sticky side-column, so the guard is a no-op there.

useEffect(() => {
  if (
    measure &&
    panelRef.current &&
    typeof panelRef.current.scrollIntoView === 'function' &&
    window.innerWidth <= MOBILE_BREAKPOINT
  ) {
    panelRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}, [measure]);

The typeof scrollIntoView === 'function' guard prevents a crash in the jsdom test environment, which does not implement this DOM API.

[github-actions]

🔍 Preview deployed: https://edc40cd5.grip-visualizer.pages.dev

Updated: Thu, 18 Jun 2026 15:51:16 GMT