VS Code - size of description popup

Question

I am creating a snippet for VS Code with long descriptions. I have noticed that the description popup window in VS Code has a scrollbar, but it would be greater if I can enlarge the window? Is it possible?

Answer 1

This is possible now with the Custom CSS and JS Loader extension.

---

1. Install extension

Custom CSS and JS Loader extension

2. Set permissions

• macOS
  • VS Code: sudo chown -R $(whoami) /Applications/Visual Studio Code.app/Contents/MacOS/Electron
  • VS Code Insiders: sudo chown -R $(whoami) /Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron
• Linux: sudo chown -R $(whoami) /usr/share/code

3. Create CSS override file

touch ~/.vscode-custom.css:

/* suggest-widget size */

.monaco-editor .suggest-widget.docs-side {
  width: 1000px;
}

.monaco-editor .suggest-widget.docs-side > .details {
  width: 60%;
  max-height: 800px !important;
}

.monaco-editor .suggest-widget.docs-side > .tree {
  width: 30%;
  float: left;
}

/* parameter-hints-widget */

.editor-widget.parameter-hints-widget.visible {
  max-height: 800px !important;
}

.monaco-editor .parameter-hints-widget > .wrapper {
  max-width: 1000px;
}

/* editor-hover */

.monaco-editor-hover .monaco-editor-hover-content {
  max-width: 1000px;
}

Apply CSS file path to settings.json

{
  "vscode_custom_css.imports": ["file:///Users/yourusername/.vscode-custom.css"],
  "vscode_custom_css.policy": true
}

4. Restart VSCode

• Restart VSCode
• Ignore "VSCode is corrupt errors_
  • You can choose to suppress these forever
• Run command "Reload Custom CSS and JS"

Answer 2

No, that's not possible currently. Sometimes text even wraps in such a popup window, which makes it difficult to read. Certainly something that needs improvement.

Here's an example:

Answer 3

VSCode 1.51 (Oct. 2020) should add (part of) that feature with:

Resizable suggestions

This milestone, we've made several improvements to the suggestions UI. First and foremost: it can now be resized! Drag the sides or corners to resize the control.

^{Theme: GitHub Light, Font: FiraCode}

The size of the suggestions list will be saved and restored across sessions.
The size of the details pane is only saved per session, since the size tends to be more variable.
Also, the editor.suggest.maxVisibleSuggestions setting has become obsolete.

---

As noted by Jan M. in the comments, this only allows resizing the suggestion window, not the popup window.
Feature allowing to resize the popup window is not yet implemented:
microsoft/vscode issue 14165: "Feature request: configure tooltip max width".

That ticket has been completed for VSCode 1.80 (June 2023), with

• PR 178811: "Adding type ResizableContentWidget - using it for the content hover widget"
• PR 185540: "Adding the resizable content hover code without the persistance mechanism"

It is available with VSCode Insiders today.

Answer 4

That's definitely possible with Customize UI + Monkey Patch extensions.

Install them and then add the following to your settings.json:

"customizeUI.stylesheet": {".monaco-hover-content, .hover-contents span, .parameter-hints-widget div.code, .parameter-hints-widget div.docs": "font-size: 12px !important"}

Don't forget to reload the window to apply the changes!

Works like a charm for me with VS Code 1.63.2