Ghost text background is not covering the whole line height

[pouyakary]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.77.1
• OS Version: 13.1 (22C65)

Steps to Reproduce:

Ghost text style API accepts a background color. The problem is that, once you apply the background color, the heigh of the ghost text does not matches the height of the line. This is an example red and black colors to be seen easily:

It's feels really wrong and annoying. And even so when you're getting multi-line suggestions:

---

I wanted to fix the problem myself. So I searched for the ghost text and found this:

/* src/vs/editor/contrib/inlineCompletions/browser/ghostText.css */
.monaco-editor .ghost-text-decoration,
.monaco-editor .ghost-text-decoration-preview,
.monaco-editor .suggest-preview-text .ghost-text {
    color: var(--vscode-editorGhostText-foreground) !important;
    background-color: var(--vscode-editorGhostText-background);
    border: 1px solid var(--vscode-editorGhostText-border);
}

Then I looked more and in src/vs/editor/contrib/inlineCompletions/browser/ghostTextWidget.ts found the code that injects the class names to the decoration. The problem was IModelDeltaDecoration only accepted class names and not more. So how can I pass the line height to the CSS? Is there any variables available or can I make one?

[hediet]

Does this work for similar features in VS Code that allow to set a background color?

[pouyakary]

Sorry but I didn't understand you. For what I have understood, this does not work like other features. the selection has a special renderer that computes round corners and stuff (it seems that it also has its own layer). I'm not a core contributor and so I have no idea what happens in vscode, but as far as I could dig into it, it seems that it is rendering the background color as a decoration like the zig zags below the errors. (I'm not sure, but guessing)