Inlay hints cover up horizontal bracket pair guides

[jjspace]

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

• VS Code Version: 1.66.2
• OS Version: Kubuntu 20.04

Steps to Reproduce:

1. Turn on a set of inlayHints that creates hints on the same line as an open bracket (like in a function call/definition)
2. Turn on editor.bracketPairColorization and set editor.bracketPairs to true or active
3. move the cursor so a horizontal pair guide is shown through the inlay hints and observe the horizontal line is covered up by the inlay background (may have to play with inlay background color depending on your theme).

The video below shows this problem and also a work around I found. Changing the editor.inlayHints.fontSize to smaller can shrink the whole inlay element so it's no longer obstructing the horizontal line. Alternatively you can set the editorInlayHint.background color to have transparency which lets the horizontal guide show through some.

Ideally these shouldn't conflict. Maybe the inlay hints need to be moved up so they can never overflow below the line of code's baseline or the horizontal guide needs to be drawn on top of everything. As it is I think it looks bad and incohesive to have the horizontal guide get broken up like this

simplescreenrecorder-2022-04-20_13.32.45.mp4

[jjspace]

I realized today that this affects the "error" and "warning" squiggly lines too

And the same opacity trick works

[jrieken]

@hediet Let's tackle this in April, I believe its just a matter of us agreeing on some (static) priority and using appropriate zIndex rules.

[jrieken]

The original issue, the conflict with bracket pair lines, doesn't occur anymore because of the work done for #145191. Inlays used to be padded but aren't anymore. The other aspect, the overlay between the squiggle and inlay hint background, is still an issue. The easiest workaround is to customise the theme color to be slightly transparent (as shown above).