feat(ui): add scroll reset for detail views

[ComputelessComputer]

Overview

• Added scroll reset functionality for detail views to improve user experience
• Ensures consistent scroll position when navigating between detail pages

Changes

• Implemented scroll reset mechanism in UI components
• Prevents unintended scroll retention between different detail views

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	6c847f0
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/693649b92cbf9800088c9949
😎 Deploy Preview	https://deploy-preview-2167--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	6c847f0
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/693649b9041d5f00083d136a
😎 Deploy Preview	https://deploy-preview-2167--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds scroll position reset logic to multiple detail view components across the web app by introducing useRef hooks and useEffect callbacks that reset scroll to top when displayed items change, while removing stateful scroll position preservation from the press-kit screenshot detail handler to simplify scroll management.

Changes

Cohort / File(s)	Summary
About view details apps/web/src/routes/_view/about.tsx	Added useRef import. Introduced scrollRef and useEffect to reset scrollTop to 0 on mount/change for StoryDetail, FounderDetail, and PhotoDetail components. Each detail container now references the scrollRef.
Brand view details apps/web/src/routes/_view/brand.tsx	Added useRef import. Introduced scrollRef and useEffect to reset scrollTop to 0 when asset/font/color id changes for VisualAssetDetail, TypographyDetail, and ColorDetail components.
Changelog detail apps/web/src/routes/_view/changelog/$slug.tsx	Added useRef import. Introduced scrollRef for ChangelogContent container with useEffect to reset scrollTop to 0 when changelog slug changes.
Press-kit app scroll simplification apps/web/src/routes/_view/press-kit/app.tsx	Removed detailScrollPosRef parameter from AppDetailView, AppDetailPanel, and ScreenshotDetail function signatures. Eliminated per-screenshot scroll position memory logic; ScreenshotDetail now resets scrollTop to 0 on screenshot change instead of preserving state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• The changes follow a consistent, repetitive pattern across most files (add useRef import, create scrollRef, initialize useEffect to reset scroll)
• One file diverges slightly with complexity removal rather than addition (press-kit simplification)
• Logic density is low; each component change is isolated and straightforward
• No complex business logic, architectural changes, or cross-component interactions to verify

Possibly related PRs

• feat(press-kit): add scroll position preservation for detail views #2162 — Directly modifies AppDetailView, AppDetailPanel, and ScreenshotDetail in press-kit/app.tsx; this PR removes the scroll state plumbing that was introduced there.
• feat(web): preserve scroll position and add query params to about and brand pages #2100 — Modifies scroll handling in detail components (about.tsx and brand.tsx); this PR's scroll-reset approach may interact with or overlap existing scroll preservation logic.
• Refactored About page #1753 — Modifies StoryDetail, FounderDetail, and PhotoDetail in about.tsx; those same components receive scroll reset logic in this PR.

Suggested reviewers

• yujonglee

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding scroll reset functionality to detail views across multiple components.
Description check	✅ Passed	The description is directly related to the changeset, explaining the purpose and benefits of the scroll reset functionality implemented.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/scroll-reset-detail-views

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d151c1f and 6c847f0.

📒 Files selected for processing (4)

• apps/web/src/routes/_view/about.tsx (7 hunks)
• apps/web/src/routes/_view/brand.tsx (7 hunks)
• apps/web/src/routes/_view/changelog/$slug.tsx (3 hunks)
• apps/web/src/routes/_view/press-kit/app.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, use cn (import from @hypr/utils). It is similar to clsx. Always pass an array and split by logical grouping.
Use motion/react instead of framer-motion.

Files:

• apps/web/src/routes/_view/changelog/$slug.tsx
• apps/web/src/routes/_view/about.tsx
• apps/web/src/routes/_view/press-kit/app.tsx
• apps/web/src/routes/_view/brand.tsx

🧠 Learnings (3)

📚 Learning: 2025-11-24T16:32:29.314Z

Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:29.314Z
Learning: Applies to apps/web/content/changelog/** : Only keep desktop-related changes when maintaining changelog entries from commits and diffs

Applied to files:

• apps/web/src/routes/_view/changelog/$slug.tsx

📚 Learning: 2025-11-24T16:32:23.055Z

Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:23.055Z
Learning: Applies to **/*.{ts,tsx} : Use `motion/react` instead of `framer-motion`.

Applied to files:

• apps/web/src/routes/_view/changelog/$slug.tsx
• apps/web/src/routes/_view/about.tsx
• apps/web/src/routes/_view/brand.tsx

📚 Learning: 2025-11-24T16:32:30.770Z

Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:30.770Z
Learning: Applies to apps/web/content/changelog/** : Only include desktop-related changes in the changelog when reading through commits and diffs

Applied to files:

• apps/web/src/routes/_view/changelog/$slug.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: Redirect rules - hyprnote
• GitHub Check: Header rules - hyprnote
• GitHub Check: Pages changed - hyprnote
• GitHub Check: fmt
• GitHub Check: ci

🔇 Additional comments (9)

apps/web/src/routes/_view/changelog/$slug.tsx (2)

6-6: LGTM! Clean ref setup.

The useRef import and scrollRef declaration follow React 19 best practices for managing DOM references.

Also applies to: 524-524

---

529-533: LGTM! Scroll reset correctly implemented.

The scroll reset logic properly checks for element existence before manipulation, and the dependency on changelog.slug ensures the view scrolls to top when navigating between changelog entries.

Also applies to: 589-589

apps/web/src/routes/_view/brand.tsx (3)

734-740: LGTM! Consistent scroll reset pattern.

The scroll reset implementation for VisualAssetDetail correctly resets to top when navigating between different visual assets.

Also applies to: 765-765

---

784-790: LGTM! Consistent implementation.

The typography detail view follows the same scroll reset pattern, ensuring consistent behavior across all detail views.

Also applies to: 804-804

---

878-884: LGTM! Pattern consistently applied.

All three detail components (visual assets, typography, colors) now share the same scroll reset behavior, providing a unified user experience.

Also applies to: 898-898

apps/web/src/routes/_view/about.tsx (3)

737-743: LGTM! Appropriate for static content.

The empty dependency array is correct for StoryDetail since it displays static content and doesn't receive a dynamic item parameter. The scroll reset only needs to occur on mount.

Also applies to: 757-757

---

859-865: LGTM! Correct dependency tracking.

The scroll reset properly reacts to founder changes via the founder.id dependency, ensuring the view resets when switching between team members.

Also applies to: 890-890

---

973-979: LGTM! Consistent implementation across detail views.

All three detail views in this file now have appropriate scroll reset behavior, with dependencies correctly matched to their content type.

Also applies to: 1004-1004

apps/web/src/routes/_view/press-kit/app.tsx (1)

487-493: LGTM! Simplified scroll management.

The change from preserving scroll position to resetting to top aligns with the PR's goal of consistent scroll behavior across detail views. The implementation matches the pattern used in the other files.

Also applies to: 516-516

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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