VS Code - Make the Intellisense "read more" (suggestion details) box bigger or its text smaller

Question

Update: Fixed in core!

VS Code has fixed this problem in VS Code Update October 2020 with Resizeable Suggestions ! You can now use a resizing tool at the bottom right corner of the "details" window to resize the box, and that size should be saved across sessions:

So this question now relates to fixed behavior, and all the complexity is no longer needed! I'm keeping the text below for the sake of history, but if you just want to control the size of the popup intellisense box, do what the gif above shows!

Original Question

VS Code supports code completion/suggestion with the Intellisense system, which gets implemented by various extensions for various languages. It works well for offering you choices as a plain list (called .tree in the HTML), but the system to show you more details about each choice suffers from some very bad design/usability in many cases.

These "Suggestion Details" can be made visible by clicking the "read more" button on the right side of a suggestion in the "tree" list, or by invoking the keyboard shortcut for completion (CMD+space on macOS) again while viewing the list. The contents will depend on your extension, but tend to be summaries of the documentation and arguments for the suggested object, method, etc.

The key problems, as I see them (and as others have complained about on the VS Code Github for years) are that the box is always very small, and doesn't even attempt to fill the available horizontal or vertical space, resulting in cut off information that wraps to many lines and needs to be scrolled through which is very distracting and unhelpful.

Additionally, there's no way to configure the font-size of this box, it always uses the default editor font size, meaning the small box is even more overloaded by the information inside.

Note: In my case I'm using PHP via the Intelephense extension, but I think the font and box size issue is much more general and applies to any language/extension that implements this "read more"/description box.

VS Code "Suggestion Details" example

Notice how the details box is totally cut off. This happens regardless of the size of the editor, it never gets bigger than this!

Netbeans code-completion at the same window size

For comparison, here is a similar panel from Netbeans. Now Netbeans is very, very ugly, but in terms of conveying information, it gets a LOT more done both by taking up more space, and by wisely using the space it has.

How can I make the details box bigger?

Even if all else was the same, making this box larger would make it much easier to use. Are there configuration parameters or extensions that could make it larger?

How can I control the font size of the details box?

I would be happy to have smaller text in this box if it meant it held more information without scrolling. Are there configuration variables or ways of unlinking this font size from that of the editor?

Can I change the contents of the details or its order?

If I'm stuck with this tiny box with large text, maybe altering the contents would improve the situation somewhat. Are there configuration variables to change these contents?

UPDATE: The contents of the Suggestion Details box are controlled by the extension that controls the suggestions, in my case, the PHP extension Elephesense. The extension creator can't change the size of the text or box, but they do have some control over the contents and their order.

Related question already answered: Changing the left-hand list of method names (tree).

Note: This question is similar to How to make VS Code Intellisense Window Wider, but different. In that question, the OP is specifically asking about the list of names that Intellisense pops up first (the part on the left, referred to as .tree in the HTML) whereas I am asking about the "details" view that pops up to its right when you click "read more".

By default this list, like the "details" box, uses the default editor font setting configured with editor.fontSize.

If what you want is to control the list on the left (e.g. if your method names are very long and don't fit) there are two built in settings you can use to change the font size and line height:

    // Set an override font size for the list of suggestions
    "editor.suggestFontSize": 12,
    // Set an override font size for the list of suggestions
    "editor.suggestLineHeight": 12, 

What I want is a setting like that but for the righthand box that shows the details! As far as I can tell there's no setting for that anywhere.

Answer 1

Update: Fixed in core!

VS Code has fixed this problem in VS Code Update October 2020 with Resizeable Suggestions ! You can now use a resizing tool at the bottom right corner of the "details" window to resize the box, and that size should be saved across sessions:

Original Answer before the fix

Looks there's no core support, at least for now

I would still love any other solutions, but after more research, found this GitHub ticket that clarifies it's currently impossible to solve and that there's been a years-long attempt by the community to propose fixes to no avail

Bummer.

HACK: Use "Custom CSS and JS Loader" extension to modify the default styles

Suggestion Details expand to show the full content with my custom CSS

A comment on the ticket linked above offers a potential solution:

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.

The comment also gave some CSS, but it didn't work at all for me, BUT after some work, I got a set of CSS working that makes the Details but 1000% more useful for me personally.

• Install the Custom CSS and JS Loader extension
• Follow the instructions on it's page in excruciating and methodical detail. This extension is not like others, and it's some kind of hack so you need to get it all right.
• Install the following CSS in a file according to the extension instructions.

Sorry it's so verbose, but I wanted to include my full answer here. Obviously you can clean it up if you want to, I just wanted to help others configure it to their own liking. The CSS below allows you to control a variety of different aspects depending on your taste and your code needs, this isn't a one-size-fits-all solution.

Warning: Depending on the size of your window and where you are, some weird stuff can happen when you modify the CSS. For me the tradeoff is worth it, but you'll have to decide for yourself. If you find the "jumping around" to be a problem, you might want to remove the --details-max-height part and just live with the wider but still too short details box.

/* CSS TO FIX INTELLISENSE SUGGESTIONS AND DETAILS BOX
- It is way too tiny by default, you can't see what's happening
- When suggestions and details are showing, each are 50% width of the parent container, which is 660px which is too small.
- This makes the parent container larger, so it's basically 50% width of the window instead
- This allows you to set a width for the suggestions box when it's on it's own (not possible in core)
- This also allows you to make the details box taller, so it can try to fit the full details without scrolling
- There's also an option to alter the details box's font-size, commented out by default 

@see https://stackoverflow.com/posts/62963539/edit
@see https://github.com/microsoft/vscode/issues/29126
*/

/* Use these custom properties to define the widths of the boxes as you need them. */
:root {
    /* Width of the container - both Tree and Details will have max-width: 50% of this value */
    --container-width: 90%;
    /* Width of suggestion list on it's own, to make it wider, match this to your longest class names etc. */
    --tree-only-width: 35rem;
    /* Width of suggestion list when it's next to tree, if you want it less than the max-width of 50%, helps with smaller windows */
    --tree-with-details-width: 25rem;
    /* max-height of details box (max-width always 50%), it should take up only the height each item needs, the taller, the more disruptive */
    --details-max-height: 60vh;
    /* Font size in details box. Uncomment to activate. Default is to match editor font size `editor.fontSize`*/
    /* --details-font-size: 90%; */
    /* --details-line-height: 1; */
}

/* CONTAINER WITH ONLY SUGGESTIONS LIST
- .suggest-widget is the parent container that has either just .tree, or .tree+.details inside. 
- This default selector affects the container when it has ONLY .tree inside */
.monaco-editor .suggest-widget {
    /* Just here for reference */
 }
 /* CONTAINER WITH BOTH LIST AND DETAILS
 - .suggest-widget.docs-side means .details is showing */
 .monaco-editor .suggest-widget.docs-side {
    /* By default this is trapped at 660px, making tree and details trapped at 330px */
    /* width: 660px; */
    /* Set a very large width so there's room for tree and details */
    width: var(--container-width) !important;
 }
/* SUGGESTIONS LIST ON ITS OWN
- .tree is the list of options to pick from, this is when details aren't showing*/
.monaco-editor .suggest-widget>.tree {
    width: var(--tree-only-width);
}
/* SUGGESTIONS LIST NEXT TO DETAILS
- .docs-side>.tree means .detail box is also showing 
- Note: at small window sizes this changes and annoying stuff happens */
.monaco-editor .suggest-widget.docs-side>.tree {
    /* By default they show 50% width and floated! */
    /* width: 50%; */
    /* float: left; */
    width: var(--tree-with-details-width) !important;
    max-width: 50%;
}
/* DETAILS BOX
- .details is the "read more" box, always inside .docs-side and next to .tree 
- Note: at small window sizes this changes and annoying stuff happens */
.monaco-editor .suggest-widget.docs-side>.details {
    /* By default they show 50% width and floated! */
    /* width: 50%; */
    /* float: left; */
    max-width: 50%;
    max-height: var(--details-max-height) !important;
}
/* DETAILS BOX CONTENTS
- Where the actual "markdown" lives, in case you want to style it */
.monaco-editor .suggest-widget.docs-side>.details .body {
    /* padding: .5rem; */
    /* margin: 1rem; */
    font-size: var(--details-font-size);
    line-height: var(--details-line-height);
}