Inline text adornments break word wrapping

• VSCode Version: 1.15.1
• OS Version: Windows 10 x64

Steps to Reproduce:

1. Settings:

    "editor.wordWrap": "on",
    "css.colorDecorators.enable": true

1. Code example:

   .form-control:focus { border-color: #141d36; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(165,128,57,0.6); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(165,128,57,0.6); }

With colorDecorators disabled word wrapping works fine. After enabling it wordWrap completely ignores the width of added decorators and wrapes the code as they are not there what makes parts of the code to be pushed out of viewport.

I think it would be better to just underline the colors accordingly instead adding new elements next to it. Also it would be great to add some margin between wrapped code and minimap (or whatever is on the right).

Reproduces without extensions: Yes

Edit: Added a screenshot to demonstrate the issue:

[trevyn]

Ok, this is starting to drive me batty. I use rust-analyzer, which uses inline decorations to show inferred type annotations, and I tend to use narrow, word-wrapped editors. This combination, plus the bug in this issue, don’t combine well.

(The dark grey type annotations in the screenshots are inferred and displayed with inline decorations, i.e. not part of the text in the actual file, and word wrap is on.)

@alexdima Do you have a sense of a reasonable approach to fix this? I’d like to start looking at the code soon, and a quick overview of what’s going on from someone familiar would help greatly.

[trevyn]

@alexdima From the user perspective, this issue is a bug — soft wrapping is broken. I think this issue should be categorized as a bug, not a feature request.