spikerj/spikersoft-issues
1
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

## [Bug] Code Container Scroll Not Working in Playgrounds #164

New Issue
Closed
opened 2026-05-17 22:44:21 +00:00 by enjin2310 · 2 comments
enjin2310 commented 2026-05-17 22:44:21 +00:00
Copy Link
Copy Source

Classification

Type: UI Bug
Priority: Medium
Component: Playground Interface / Code Editor Container

Summary

In the Playgrounds environment, the code editor container intermittently fails to scroll. When the code exceeds the visible area, the scroll bar either does not appear or remains static, preventing users from viewing or editing code beyond the visible portion.

Steps to Reproduce

  1. Navigate to any playground (e.g., learn.spikersoft.com/tools/python-playground).
  2. Open a lesson with multiple lines of code (e.g., Lesson 20201 – Four Operators).
  3. Write or paste code that extends beyond the visible editor area.
  4. Attempt to scroll within the code container.

Expected Behavior

  • The code editor should allow smooth vertical scrolling.
  • The scroll bar should appear automatically when content exceeds the visible area.
  • Users should be able to navigate through all lines of code without obstruction.

Actual Behavior

  • The scroll bar does not appear or remains unresponsive.
  • The page scrolls instead of the code container.
  • Users cannot access or edit code outside the visible area.

Evidence

The attached screenshot shows the Four Operators lesson with multiple function definitions. The code extends beyond the visible area, but the editor does not scroll, forcing the user to resize or reload the page.

Environment

  • Browser: Microsoft Edge
  • OS: Windows 10
  • Lesson ID: 20201
  • Version: v2026.05.17a

Possible Root Cause

  • CSS overflow property may be incorrectly set (overflow: hidden instead of auto).
  • The code editor’s container might lose focus or event binding for scroll actions.
  • Dynamic resizing or rendering of the editor may reset scroll behavior.

Suggested Fix

  • Ensure consistent overflow-y: auto behavior for the code editor container.
  • Review event propagation to prevent scroll hijacking by parent elements.
  • Implement focus locking when the user interacts with the code editor.

Additional Notes

This issue affects usability and accessibility, especially for lessons requiring longer code samples. It disrupts the learning flow and may frustrate users who cannot view or modify their full code.

### Classification **Type:** UI Bug **Priority:** Medium **Component:** Playground Interface / Code Editor Container ### Summary In the **Playgrounds** environment, the code editor container intermittently fails to scroll. When the code exceeds the visible area, the scroll bar either does not appear or remains static, preventing users from viewing or editing code beyond the visible portion. ### Steps to Reproduce 1. Navigate to any playground (e.g., [learn.spikersoft.com/tools/python-playground](https://learn.spikersoft.com/tools/python-playground)). 2. Open a lesson with multiple lines of code (e.g., **Lesson 20201 – Four Operators**). 3. Write or paste code that extends beyond the visible editor area. 4. Attempt to scroll within the code container. ### Expected Behavior - The code editor should allow smooth vertical scrolling. - The scroll bar should appear automatically when content exceeds the visible area. - Users should be able to navigate through all lines of code without obstruction. ### Actual Behavior - The scroll bar does not appear or remains unresponsive. - The page scrolls instead of the code container. - Users cannot access or edit code outside the visible area. ### Evidence The attached screenshot shows the **Four Operators** lesson with multiple function definitions. The code extends beyond the visible area, but the editor does not scroll, forcing the user to resize or reload the page. ### Environment - **Browser:** Microsoft Edge - **OS:** Windows 10 - **Lesson ID:** 20201 - **Version:** v2026.05.17a ### Possible Root Cause - CSS overflow property may be incorrectly set (`overflow: hidden` instead of `auto`). - The code editor’s container might lose focus or event binding for scroll actions. - Dynamic resizing or rendering of the editor may reset scroll behavior. ### Suggested Fix - Ensure consistent `overflow-y: auto` behavior for the code editor container. - Review event propagation to prevent scroll hijacking by parent elements. - Implement focus locking when the user interacts with the code editor. ### Additional Notes This issue affects usability and accessibility, especially for lessons requiring longer code samples. It disrupts the learning flow and may frustrate users who cannot view or modify their full code.
Screenshot 2026-05-17 184255.png
234 KiB
Screenshot 2026-05-17 184255.png
spikerj commented 2026-06-08 18:26:53 +00:00
Owner
Copy Link
Copy Source

Triage: this is very likely already resolved.

This was reported against v2026.05.17a, when the playground editor was CodeMirror — the symptom (no scrollbar, page scrolls instead of the code container) is the classic behavior of an editor without a bounded scroll viewport. The editor has since been migrated to Monaco, which renders inside a fixed-height container (height: 400px; overflow: hidden) and provides its own internal vertical scrollbar, so long code now scrolls within the editor rather than pushing the page. This is the same migration that resolved the C# Sandbox input issues (#182/#157).

Could you re-test on the current build and confirm? Please reopen with the lesson ID and browser/OS if you can still reproduce the code container failing to scroll — otherwise this can be closed.

Triage: this is very likely already resolved. This was reported against `v2026.05.17a`, when the playground editor was CodeMirror — the symptom (no scrollbar, page scrolls instead of the code container) is the classic behavior of an editor without a bounded scroll viewport. The editor has since been migrated to Monaco, which renders inside a fixed-height container (`height: 400px; overflow: hidden`) and provides its own internal vertical scrollbar, so long code now scrolls within the editor rather than pushing the page. This is the same migration that resolved the C# Sandbox input issues (#182/#157). Could you re-test on the current build and confirm? Please reopen with the lesson ID and browser/OS if you can still reproduce the code container failing to scroll — otherwise this can be closed.
spikerj commented 2026-06-16 22:32:11 +00:00
Owner
Copy Link
Copy Source

Verified against current master code. The playground editor is now app-monaco-editor mounted in a fixed-height container: .editor-container .code-editor { height: 400px; overflow: hidden } (libraries/platform/language-runner/src/lib/language-runner.scss), and the wrapper creates Monaco with scrollBeyondLastLine: false and its built-in scrollbars (monaco-editor.component.ts). Code longer than the visible area now scrolls inside the editor, and Monaco captures wheel events over its scrollable content instead of letting them bubble to the page — which is exactly the CodeMirror-era failure described here ("scroll bar does not appear / the page scrolls instead of the code container"). The lesson sidebar's separate long-list scroll was also contained under #22. Closing as resolved by the Monaco migration; please reopen with the lesson + browser/OS if a non-scrolling editor still reproduces on the latest deploy.

Verified against current `master` code. The playground editor is now `app-monaco-editor` mounted in a fixed-height container: `.editor-container .code-editor { height: 400px; overflow: hidden }` (`libraries/platform/language-runner/src/lib/language-runner.scss`), and the wrapper creates Monaco with `scrollBeyondLastLine: false` and its built-in scrollbars (`monaco-editor.component.ts`). Code longer than the visible area now scrolls **inside** the editor, and Monaco captures wheel events over its scrollable content instead of letting them bubble to the page — which is exactly the CodeMirror-era failure described here ("scroll bar does not appear / the page scrolls instead of the code container"). The lesson sidebar's separate long-list scroll was also contained under #22. Closing as resolved by the Monaco migration; please reopen with the lesson + browser/OS if a non-scrolling editor still reproduces on the latest deploy.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#164