[Modsofthenation]

Summary

Fixes scroll lag on Settings (especially near the top) and other long multi-section pages.

Cause

The sticky “On this page” nav’s IntersectionObserver called getBoundingClientRect() on multiple sections on every callback (with many thresholds), forcing layout while scrolling. Sticky chrome also used backdrop-filter: blur, which is costly in desktop WebView.

Fix

• Section nav: use observer entry geometry only, coalesce via requestAnimationFrame, fewer thresholds, skip no-op setActiveId
• Sticky sidebar / topbar / section nav: solid backgrounds instead of backdrop blur
• Long .page-section blocks: content-visibility: auto so off-screen sections (e.g. Integrations) skip paint until near the viewport

Test plan

• pnpm --filter @prm/ui typecheck
• Desktop Settings: scroll near Appearance → Integrations; should feel smoother
• Section nav still highlights the active section and jump links still work

  

Summary by CodeRabbit

• Bug Fixes
  • Improved scrolling performance on Settings and other long pages.
  • Reduced layout work during section navigation and active-section tracking.
  • Added support for reduced-motion preferences during navigation.
  • Updated navigation and page styling for smoother, more responsive scrolling.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 63d1725e-432a-4357-a02f-5258140368be

📥 Commits

Reviewing files that changed from the base of the PR and between 687d116 and b1f72fc.

📒 Files selected for processing (3)

• CHANGELOG.md
• apps/ui/src/components/PageSectionNav.tsx
• apps/ui/src/styles.css

---

📝 Walkthrough

Walkthrough

PageSectionNav now batches section tracking updates, removes layout-forcing measurements, and respects reduced-motion preferences. Styles add section containment, remove backdrop blur, and use solid navigation backgrounds. The changelog records the fix.

Changes

Scroll performance and section navigation

Layer / File(s)	Summary
Batched section tracking and motion-aware navigation apps/ui/src/components/PageSectionNav.tsx	Section tracking now uses sectionKey IDs, observer geometry, fewer thresholds, and requestAnimationFrame batching. Redundant updates are skipped, cleanup cancels pending frames, and navigation respects reduced-motion preferences.
Rendering and sticky chrome styles apps/ui/src/styles.css, CHANGELOG.md	Page and settings sections use off-screen rendering containment. Sticky chrome and section navigation no longer use backdrop blur or translucent backgrounds. The changelog records the fix.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: cursoragent

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/fix-settings-scroll-lag-ebae

---

_{Comment @coderabbitai help to get the list of available commands.}