Auto-scroll orbital list to keep the selected orbital visible#20
Merged
Conversation
When navigating orbitals with the arrow keys (or HOMO/LUMO buttons), the selection moved but the list did not scroll, so the highlighted orbital could end up off-screen. After rebuilding the list, scroll the list container (only the list, not the page) so the selected entry stays in view. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR improves the orbital navigation UX by automatically scrolling the orbital list so the currently selected orbital remains visible when the selection changes via ↑/↓ keys or the HOMO/LUMO controls.
Changes:
- Track the newly-created selected orbital DOM node while rebuilding the list.
- After rebuilding, adjust
#orbitalList.scrollToponly when the selected item is outside the list’s visible viewport (usinggetBoundingClientRectdeltas).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
In the orbital list, pressing ↑/↓ (or using the HOMO/LUMO buttons) moved the selection, but the list did not scroll to follow it. The highlighted orbital could move off-screen, so you couldn't see which orbital was selected.
Fix
After
updateOrbitalList()rebuilds the list and tags the current orbital with.selected, scroll the#orbitalListcontainer so the selected entry stays in view. UsesgetBoundingClientRectdeltas to adjust onlylist.scrollTop— it never scrolls the page or the surrounding panel, and only scrolls when the entry is actually outside the visible area (so it doesn't jump around unnecessarily).Testing
<script>blocks pass a JS syntax check.npm start): load a structure with orbital data, open the orbital panel, and hold ↑/↓ — the list should now track the selection in both directions.🤖 Generated with Claude Code