fix(app): sticky accordion scroll issue#16408
fix(app): sticky accordion scroll issue#16408neriousy wants to merge 3 commits intoanomalyco:devfrom
Conversation
|
Thanks for updating your PR! It now meets our contributing guidelines. 👍 |
There was a problem hiding this comment.
Pull request overview
This PR fixes a scroll position issue when collapsing sticky accordion sections in the OpenCode app. When a user closes a file diff accordion, the content above collapses and the viewport would jump unexpectedly. The fix introduces a pinSticky utility that captures the accordion header's screen position before toggling, then continuously adjusts scrollTop on the scrollable ancestor using requestAnimationFrame and ResizeObserver to keep the header visually pinned during content collapse animations.
Changes:
- Introduced a new
sticky-accordion.tsmodule withaccordionValue(normalizes accordion value to an array) andpinSticky(maintains scroll position when accordion content collapses) - Updated
StickyAccordionHeaderto accept and forward arefprop so callers can capture the header DOM element - Applied the
pinStickyscroll-pinning pattern acrosssession-turn.tsx,session-review.tsx, andmessage-part.tsxfor all accordion toggle interactions
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
packages/ui/src/components/sticky-accordion.ts |
New utility module with accordionValue normalizer and pinSticky scroll-pinning function |
packages/ui/src/components/sticky-accordion-header.tsx |
Added ref prop support via splitProps to forward header element reference |
packages/ui/src/components/session-turn.tsx |
Added scroll pinning for collapsible and nested accordion toggling of file diffs |
packages/ui/src/components/session-review.tsx |
Added scroll pinning for accordion toggling in the session review panel |
packages/ui/src/components/message-part.tsx |
Added scroll pinning for ToolFileAccordion and apply_patch tool accordion sections |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
# Conflicts: # packages/ui/src/components/message-part.tsx # packages/ui/src/components/session-turn.tsx
|
moved to #16510 cause github wont assign adam on non |
Issue for this PR
Closes #16407
Type of change
What does this PR do?
When closing a sticky accordion proper scroll is maintained
If you paste a large clearly AI generated description here your PR may be IGNORED or CLOSED!
How did you verify your code works?
Open file diff
Scroll down
Close file diff
Screenshots / recordings
2026-03-07.00-08-01.mp4
Checklist
If you do not follow this template your PR will be automatically rejected.