Fix controls panel clipping on small/mobile screens#29
Merged
Conversation
Make the controls sidebar scroll vertically when taller than the window, and stack the layout into a single scrollable column on narrow screens so the sidebar is no longer clipped horizontally. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
CSS-only fix to prevent the controls sidebar from being clipped on small/mobile screens. Adds internal vertical scrolling to the sidebar at all sizes, and introduces a ≤768px media query that stacks the viewer above a full-width controls panel. Also slims the zoom Reset button so it doesn't overflow narrow widths.
Changes:
- Make
#controlsa fixed-width, non-shrinking column with its own vertical scroll (height: 100vh; overflow-y: auto). - Add
@media (max-width: 768px)rules to stack#containervertically and let#controlsexpand to full width with page-level scroll. - Reduce the Reset zoom button's
min-widthfrom 70px to 50px with tighter padding.
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.
Summary
Fixes both vertical and horizontal clipping of the controls sidebar on small/mobile windows, where buttons (e.g. xtb, ElemCo) could become unreachable.
Changes (CSS only,
css/styles.css)#controlsnow scrolls internally (height: 100vh; overflow-y: auto), so bottom buttons stay reachable when the window is shorter than the panel.min-width: 0overrides the 400px minimum that forced overflow, and the page scrolls vertically. The existingResizeObserveron#viewerreflows the JSmol canvas automatically.min-width: 70px→50px, tighter padding) so it no longer overflows the edge on narrow screens.No JavaScript changes.
Testing
Open
index.htmland use the browser's responsive/device mode (or a real phone): below 768px the controls appear full-width under the viewer with vertical page scroll and no horizontal cutoff; at wider widths the original side-by-side layout is unchanged, now with the sidebar scrolling when taller than the window.🤖 Generated with Claude Code