fix(web): preserve scroll position in press-kit app sidebar

[ComputelessComputer]

Summary

Preserves the scroll position in the press-kit app sidebar when switching between screenshots. Previously, clicking on a different screenshot would reset the sidebar scroll position to the top.

The fix uses two refs:

• scrollRef - attached to the scrollable sidebar container
• scrollPosRef - stores the current scroll position

A useEffect hook restores the scroll position and sets up a scroll listener whenever the selected item changes.

Review & Testing Checklist for Human

• Test on the press-kit app page: navigate to /press-kit/app, scroll down in the sidebar, click different screenshots, and verify scroll position is preserved
• Verify mobile drawer behavior is acceptable (scroll preservation was not added to the mobile drawer - confirm if this is desired)

Notes

• Only the desktop sidebar (AppDetailView → AppSidebar) has scroll preservation. The mobile drawer (MobileSidebarDrawer) does not have this feature - let me know if it should be added.

Requested by: [email protected] (@ComputelessComputer)
Link to Devin run: https://app.devin.ai/sessions/cab0a37e9b8e44c29048b73e72dd05fc

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	79d2df3
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/6932980ffb327500087c88dd
😎 Deploy Preview	https://deploy-preview-2141--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.

[coderabbitai]

Warning

Rate limit exceeded

@ComputelessComputer has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 27 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 775c138 and 79d2df3.

📒 Files selected for processing (1)

• apps/web/src/routes/_view/press-kit/app.tsx (3 hunks)

✨ 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 devin/1764923146-preserve-scroll-pos-press-kit

---

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.}

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	79d2df3
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/6932980fc90ef400086bad99
😎 Deploy Preview	https://deploy-preview-2141--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.