vs code useful fixes

style.css

/*
  https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css
  https://marketplace.visualstudio.com/items?itemName=lehni.vscode-fix-checksums
*/

.loopText tspan {
  fill: white;
  background: white;
}
/* removes underscore style on links */
.mtku, .detected-link {
  text-decoration: none !important;
}
/* sets better width of debugger hover widget */
.monaco-editor .debug-hover-widget .complex-value {
  width:100% !important;
  min-width:648px !important;
  resize: both !important;
}
/* 
  intellisense width fix
  https://stackoverflow.com/posts/62963539/edit
  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: 30rem;
  /* 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);
  float: left !important;
}
/* 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%;
  float: left !important;
}
/* 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;
  float: left !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);
}


/* parameter-hints-widget */
.editor-widget.parameter-hints-widget.visible {
  max-height: 800px !important;
}
.monaco-editor .parameter-hints-widget > .wrapper {
  max-width: 1600px;
}

/* editor-hover */
.monaco-editor-hover .monaco-editor-hover-content {
  max-width: 1600px;
}