suggest: fix handling around long lines

connor4312 · connor4312 · commit 155fcfa5bb9a · 2020-02-28T11:56:45.000-08:00
See: microsoft#90552 (comment) `overflow: hidden` should have been `overflow: auto`. Auto displays a scrollbar which, depending on the platform, can make the items too high. Also fixes names being cut off (see the loooong) cutoff in the linked issue. `flex-shrink:0` is on the label, with a max-width of 100%. But on the left there was the 18px icon, so the right side of the label was 18px off the end and not visible. Fix it by moving the icon outside of the `.left` side. We could alternately `calc(100% - 18px)`, but since the icon was not a hardcoded size in CSS I didn't want to implicitly depend on that.
diff --git a/src/vs/editor/contrib/suggest/media/suggest.css b/src/vs/editor/contrib/suggest/media/suggest.css
@@ -176,7 +176,7 @@
 }
 
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .signature-label {
-	overflow: auto;
+	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
@@ -228,6 +228,7 @@
 
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left {
 	flex-shrink: 1;
+	flex-grow: 1;
 	overflow: hidden;
 }
 .monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .monaco-icon-label {
diff --git a/src/vs/editor/contrib/suggest/suggestWidget.ts b/src/vs/editor/contrib/suggest/suggestWidget.ts
@@ -144,11 +144,10 @@ class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTemplateD
 		const text = append(container, $('.contents'));
 		const main = append(text, $('.main'));
 
+		data.iconContainer = append(main, $('.icon-label.codicon'));
 		data.left = append(main, $('span.left'));
 		data.right = append(main, $('span.right'));
 
-		data.iconContainer = append(data.left, $('.icon-label.codicon'));
-
 		data.iconLabel = new IconLabel(data.left, { supportHighlights: true, supportCodicons: true });
 		data.disposables.add(data.iconLabel);
 

Original file line number	Diff line number	Diff line change
`@@ -176,7 +176,7 @@`
`176`	`176`	`}`
`177`	`177`
`178`	`178`	`.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .signature-label {`
`179`		`- overflow: auto;`
	`179`	`+ overflow: hidden;`
`180`	`180`	`text-overflow: ellipsis;`
`181`	`181`	`}`
`182`	`182`
`@@ -228,6 +228,7 @@`
`228`	`228`
`229`	`229`	`.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left {`
`230`	`230`	`flex-shrink: 1;`
	`231`	`+ flex-grow: 1;`
`231`	`232`	`overflow: hidden;`
`232`	`233`	`}`
`233`	`234`	`.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .monaco-icon-label {`