monaco-editor icon indicating copy to clipboard operation
monaco-editor copied to clipboard

[Bug] - Viewport scrolling doesn't keep in perfect sync when Monaco editor has a small fixed height

Open mammerla opened this issue 1 year ago • 0 comments

Reproducible in vscode.dev or in VS Code Desktop?

  • [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html

Monaco Editor Playground Code

No response

Reproduction Steps

  1. Visit https://microsoft.github.io/monaco-editor/playground.html
  2. Add >10 lines of random content into the HTML view
  3. Using browser editor tools, inspect the DOM and find the div class="monaco-editor-react editor-container" element that wraps the HTML editor and set the height element (probably from 200px) to "80px" - only four lines of HTML should now be visible. (This replicates what happens when (my code, and I assume vscode.dev), is operating in a very browser-height-constrained environment)
  4. Use your arrow keys to arrow down.

Actual (Problematic) Behavior

When the arrow cursor gets to line 5, the cursor out of the viewport of Monaco When the arrow cursor gets to line 7, the view port scrolls downward to try to keep the cursor in view, but it's always perpetually out of the view port. From a "scrolling viewport" perspective, it's as if Monaco always assumes that the viewport has room for at least 6 lines of code.

Expected Behavior

As you use the arrow keys to arrow around, the viewport should always keep the cursor in view.

Additional Context

Note: you can kind-of repro this on vscode.dev, though it's not realistically a "vscode.dev bug". If you set the browser zoom to 400% and set the browser height so narrow it only shows 4 lines of code, and you put in >10 lines of code inside of the window, the viewport scrolling is a little "out of sync".

This is opened as an accessibility bug in my project because when the browser zoom is 400% in my app on a ~900px tall browser window, I'm effectively giving Monaco about ~80px of vertical height, and the viewport scrolling isn't keeping the cursor in view which creates a form of an accessibility problem.

mammerla avatar Jul 31 '24 23:07 mammerla