Snippets readability issues and downsides of January update

[lnikell]

We develop an extension that will allow users to load code snippets only for libraries that they use in the current project. We try to standardize snippets by providing a predictable way of searching them by typing library name and them method/function etc.

Previously in October update, it was displayed this way:

But in January update it looks this way:

It causes serious readability issues since you can see the snippet's name and instead you see half name and half description which does not make any sense. Even with the empty description you still truncate the first part.

Also, I've looked through the existing issue and did not find a way to customize that window, so we can't increase the size to make it better for users.

Could you suggest the workaround we can use to make it readable again?

[Fasani]

I guess I understand the feature improvement but it needs more width IMO. If you want to display twice as much data you should give twice as much width. I have so much free space for that on my small MacBook pro screen.

You could make it an option to override in user settings to control the width of the suggestions box or just give it the width it needs to show more data. Personally I think manual width adjustment is the most flexible AND/OR allow to enable or display the new middle panel area

[jrieken]

This is a duplicate. Unfortunately, I don't recall the exact issue number nor its title 😳 Anyways, searching for issues with the same labels will likely help you 👉
https://github.com/microsoft/vscode/issues?utf8=✓&q=is%3Aopen+label%3Asuggest+label%3Aux

[Fasani]

Semi-related to:
#98228 - Open since 20 May 2020
#29757 - Open since 28 Jun 2017
#29126 - Open since 20 Jun 2017

The following hack was provided by @povilasbaranovas

This is not a proper solution, but a hack that might break after any program update!

As VsCode is styled mainly using CSS to change the size you have to simply override default values.
This can be accomplished by using "Custom CSS and JS loader" extension and injecting your own CSS.

Width value is static 430px:
.monaco-editor .suggest-widget { width: 430px; }

Height value is set inline on element by editor depending on how many suggestions there are so !important is necessary to owerride it:
.monaco-editor .suggest-widget>.tree { height: 300px !important; }