Scroll to top of instruction panel when step changes

[jamdelion]

This fixes a bug that has been a long-standing gripe in the projects site.

For paginated instructions, it does not scroll back up to the top when you reach a new step. This is jarring because young people have to realise that they're not looking at the start of the instructions on the new page.

[Copilot]

Pull request overview

This PR aims to improve the UX of paginated project instructions by ensuring the instructions panel scroll position resets to the top when navigating between steps.

Changes:

• Added a panelRef hook-up to SidebarPanel’s scrollable content container.
• Passed the ref through InstructionsPanel and used it in ProgressBar navigation to scroll to top.
• Minor JSX/import cleanup in InstructionsPanel.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
src/components/Menus/Sidebar/SidebarPanel.jsx	Accepts panelRef and attaches it to the scrollable .sidebar__panel-content div.
src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx	Scrolls the sidebar panel content to top when navigating next/previous steps.
src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx	Creates/passes the panelRef into SidebarPanel and ProgressBar via Footer.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The scroll-to-top logic is currently only triggered from ProgressBar button handlers, but currentStepPosition also changes elsewhere in this component (e.g., the quiz-completion effect dispatches setCurrentStepPosition). To fully address “scroll when step changes”, move the scroll-to-top into an effect that runs on currentStepPosition changes (using panelRef.current?.scrollTo(...)) so all step transitions (buttons, quiz auto-advance, etc.) behave consistently.

[jamdelion]

There is also a problem with the quizzes, but less pressing than the step change for now.