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

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);
}