Word wrap on left side

[Sami Sankari (diddiman)]

Hi!

So i am using the monaco diff editor and it works fine. However when i use word wrap i can't seem to get it working for the left side of the side-by-side view. It only wraps on the right side. When the text is too long on the left side it just gives a scrollbar instead. Any idea what it could be?

[Bob Yexley (ryexley)]

I'm seeing the same issue as well. Anyone else seen this and have any idea how to fix it?

[Bob Yexley (ryexley)]

Sami Sankari (@diddiman) you don't happen to be using the Monaco Editor via the @monaco-editor/react wrapper do you? I'm asking because I am, and I'd like to try to identify whether or not it might have anything to do with that.

[Sami Sankari (diddiman)]

I am! I am pretty sure I saw someone using it without the wrapper and it had the same issue. Can't swear on that though

[Bob Yexley (ryexley)]

I did not previously have the monaco-editor package installed as a direct dependency in my project, so I was depending on whatever version that parent package was pulling in. I think I might possibly the issue solved, but only by adding it as a dependency, and rolling back to run version 0.43.0, and by doing so, I am no longer seeing the issue. Haven't dug in yet to try to see what might be causing it, but this will do for now for our needs.

[Bob Yexley (ryexley)]

From what I can tell, this issue actually exists in VS Code as well. Here's a screenshot of a side-by-side diff where you can fairly clearly see that my code is word-wrapped on the right side, but it is NOT wrapped, and horizontally scrollable on the left.

[Bob Yexley (ryexley)]

This is becoming more and more of a mystery to me honestly. For a lack of activity on this conversation, I was going to link to this conversation from a new Bug report in Issues, but as I was going through the process of doing that, I attempted to create a reproduction of the issue in the Monaco Editor playground, but was unable to do so. It seems to work for me over there just fine. Sssoooo yeah ... I'm not exactly sure what's up with this to be honest.

[Sami Sankari (diddiman)]

Hmm, very interesting. That indeed seems to work for me as well...

[tsx-ell]

i was facing the exact same issue and setting options.useInlineViewWhenSpaceIsLimited: false helped me

(property) editor.IDiffEditorBaseOptions.useInlineViewWhenSpaceIsLimited?: boolean | undefined
When renderSideBySide is enabled, useInlineViewWhenSpaceIsLimited is set, and the diff editor has a width less than renderSideBySideInlineBreakpoint, the inline view is used.

[Arthur Wolf (arthurwolf)]

I'm having the exact same issue, in a vue app, no way to get the line wrap to work for the left pane of the diff view.

Anyone has a solution to this? Even like, editing the Monaco source code, anything, this is extremely annoying.

Thanks!

[Pablo Albrecht (palbrecht1)]

Having the same issue in 2026

[StarStreammm (starstreammm)]

Using the option useInlineViewWhenSpaceIsLimited: false works for me. React with <DiffEditor> component.

[StarStreammm (starstreammm)]

Find the solution at #4701.