keep authored line-breaks for details/type label, tweak sizing,...

keep authored line-breaks for details/type label, tweak sizing, https://github.com/microsoft/vscode/issues/99370

src/vs/editor/contrib/suggest/media/suggest.css

@@ -342,7 +342,6 @@
 	box-sizing: border-box;
 	height: 100%;
 	width: 100%;
-	padding-right: 22px;
 }
 
 .monaco-editor .suggest-details>.monaco-scrollable-element>.body>.header>.type {
@@ -350,7 +349,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	opacity: 0.7;
-	white-space: nowrap;
+	white-space: pre;
 	margin: 0 24px 0 0;
 	padding: 4px 0 12px 5px;
 }
@@ -361,6 +360,10 @@
 	white-space: pre-wrap;
 }
 
+.monaco-editor .suggest-details.no-type>.monaco-scrollable-element>.body>.docs {
+	margin-right: 24px;
+}
+
 .monaco-editor .suggest-details>.monaco-scrollable-element>.body>.docs.markdown-docs {
 	padding: 0;
 	white-space: initial;

src/vs/editor/contrib/suggest/suggestWidgetDetails.ts

@@ -16,6 +16,7 @@ import { Codicon } from 'vs/base/common/codicons';
 import { Emitter, Event } from 'vs/base/common/event';
 import { ResizableHTMLElement } from 'vs/editor/contrib/suggest/resizable';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { count } from 'vs/base/common/strings';
 
 export function canExpandCompletionItem(item: CompletionItem | undefined): boolean {
 	return !!item && Boolean(item.completion.documentation || item.completion.detail && item.completion.detail !== item.completion.label);
@@ -112,7 +113,7 @@ export class SuggestDetailsWidget {
 	renderLoading(): void {
 		this._type.textContent = nls.localize('loading', "Loading...");
 		this._docs.textContent = '';
-		this.domNode.classList.remove('no-docs');
+		this.domNode.classList.remove('no-docs', 'no-type');
 		this.layout(this.size.width, this.getLayoutInfo().lineHeight * 2);
 		this._onDidChangeContents.fire(this);
 	}
@@ -139,7 +140,7 @@ export class SuggestDetailsWidget {
 			return;
 		}
 
-		this.domNode.classList.remove('no-docs');
+		this.domNode.classList.remove('no-docs', 'no-type');
 
 		// --- details
 		if (detail) {
@@ -148,6 +149,7 @@ export class SuggestDetailsWidget {
 		} else {
 			dom.clearNode(this._type);
 			dom.hide(this._type);
+			this.domNode.classList.add('no-type');
 		}
 
 		// --- documentation
@@ -178,7 +180,16 @@ export class SuggestDetailsWidget {
 		};
 
 		this._body.scrollTop = 0;
-		this.layout(this._size.width, this.getLayoutInfo().lineHeight * (2 + (documentation ? 5 : 0)));
+
+		let heightInLines = 0;
+		if (detail) {
+			heightInLines += 2 + count(detail, '\n');
+		}
+		if (documentation) {
+			heightInLines += 5;
+		}
+
+		this.layout(this._size.width, this.getLayoutInfo().lineHeight * heightInLines);
 		this._onDidChangeContents.fire(this);
 	}