Keep horizontal scrollbar visible in responsive#1409
Open
abcampo-iry wants to merge 2 commits intomainfrom
Open
Keep horizontal scrollbar visible in responsive#1409abcampo-iry wants to merge 2 commits intomainfrom
abcampo-iry wants to merge 2 commits intomainfrom
Conversation
Add OverlayScrollbars and the React wrapper as dependencies for the Scratch editor. The package is MIT-licensed and covers the custom horizontal scrollbar behavior we need on macOS/Chrome. This commit only adds the dependency and wires its base styles into the standard app bundle and the web component bundle.
abcampo-iry
temporarily deployed
to
previews/1409/merge
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a dedicated horizontal scrollbar for Scratch projects in responsive layouts by wrapping the Scratch iframe with OverlayScrollbars and applying targeted styling to keep the scrollbar visible when needed.
Changes:
- Add
overlayscrollbars+overlayscrollbars-reactdependencies and wire them intoScratchContainer. - Introduce Scratch-specific scrollbar options + SCSS theme to reserve space and keep the horizontal scrollbar visible.
- Update
ScratchContainertests to mock OverlayScrollbars and assert configuration.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Locks new OverlayScrollbars dependencies. |
| package.json | Adds overlayscrollbars and overlayscrollbars-react dependencies. |
| src/components/Editor/Project/ScratchContainer.jsx | Wraps the Scratch iframe in OverlayScrollbarsComponent, configures horizontal scrolling, and enforces a min-width. |
| src/components/Editor/Project/ScratchContainer.test.js | Mocks OverlayScrollbars modules and adds assertions for options/configuration. |
| src/components/Editor/Project/Project.jsx | Imports OverlayScrollbars base CSS (in addition to existing CSS imports). |
| src/assets/stylesheets/ScratchContainer.scss | Adds layout + theme styling and scrollbar-space reservation behavior for Scratch viewport. |
| src/assets/stylesheets/Project.scss | Includes ScratchContainer styles and expands theme selectors for #wc contexts. |
| src/assets/stylesheets/ExternalStyles.scss | Injects OverlayScrollbars base CSS into the web-component external stylesheet. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Wrap the Scratch iframe in OverlayScrollbars and keep the scrollbar scoped to the Scratch project view. The bar only appears when the iframe overflows horizontally, keeps a small gutter of its own. Shortens the iframe when visible so the scrollbar does not sit on top of the editor. Also add focused tests around the Scratch iframe URL and scrollbar configuration.
abcampo-iry
force-pushed
the
issues/1196-horizontal-scroll-on-top
branch
from
2305792 to
acd83ab
Compare
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.
Closes: https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1196
The intent of this PR is being able to show a responsive overflow bar when we are in responsive.
To achieve this it's been:
Screen.Recording.2026-03-27.at.15.50.35.mov