diff --git a/src/vs/editor/contrib/suggest/browser/media/suggest.css b/src/vs/editor/contrib/suggest/browser/media/suggest.css index fe64def759b947b37d3e73692f556d471cb594aa..7ca54b83969b68595ff33467e14a6b7a312f23a1 100644 --- a/src/vs/editor/contrib/suggest/browser/media/suggest.css +++ b/src/vs/editor/contrib/suggest/browser/media/suggest.css @@ -34,7 +34,17 @@ .monaco-editor .suggest-widget.docs-side > .tree, .monaco-editor .suggest-widget.docs-side > .details { - width: 328px; + /* subtract 2px for border, and another 2 for the Chromium zoom issue + where the children get slightly bigger width than what is set + which makes the docs go below the list */ + width: calc(50% - 4px); + float: left; + +} + +.monaco-editor .suggest-widget.docs-side.list-right > .tree, +.monaco-editor .suggest-widget.docs-side.list-right > .details { + float: right; } .monaco-editor.hc-black .suggest-widget.docs-side > .tree, @@ -42,6 +52,14 @@ width: 326px; } +.monaco-editor .suggest-widget.docs-side .empty-left-border { + border-left-width: 0px; +} + +.monaco-editor .suggest-widget.docs-side .empty-right-border { + border-right-width: 0px; +} + /* Styles for Message element for when widget is loading or is empty */ .monaco-editor .suggest-widget > .message { padding-left: 22px; @@ -58,13 +76,7 @@ height: 100%; } -.monaco-editor .suggest-widget.docs-side > .tree { - float: left; -} -.monaco-editor .suggest-widget.docs-side.list-right > .tree { - float: right -} /** Styles for each row in the list element **/ @@ -207,6 +219,10 @@ display: none; } +.monaco-editor .suggest-widget.docs-below .details { + border-top-width: 0px; +} + .monaco-editor .suggest-widget .details > .monaco-scrollable-element { flex: 1; } diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index 56871ef950444b5af4385c9650143546c5b8cc50..c27e0dbaa95055db45339d83e604ba30a7f5d4ce 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -948,14 +948,42 @@ export class SuggestWidget implements IContentWidget, IDelegate } private adjustListPosition(): void { - if (hasClass(this.element, 'widget-above') - && hasClass(this.element, 'docs-side') - && this.details.element.offsetHeight > this.listElement.offsetHeight) { - // Docs is bigger than list and widget is above cursor, apply margin-top so that list appears right above cursor - this.listElement.style.marginTop = `${this.details.element.offsetHeight - this.listElement.offsetHeight}px`; - } else { - this.listElement.style.marginTop = '0px'; + + + if (hasClass(this.element, 'docs-side')) { + + if (this.details.element.offsetHeight > this.listElement.offsetHeight) { + if (hasClass(this.element, 'widget-above')) { + // Docs is bigger than list and widget is above cursor, apply margin-top so that list appears right above cursor + this.listElement.style.marginTop = `${this.details.element.offsetHeight - this.listElement.offsetHeight}px`; + } + + if (hasClass(this.element, 'list-right')) { + addClass(this.listElement, 'empty-left-border'); + removeClass(this.listElement, 'empty-right-border'); + } else { + addClass(this.listElement, 'empty-right-border'); + removeClass(this.listElement, 'empty-left-border'); + } + + removeClass(this.details.element, 'empty-left-border'); + removeClass(this.details.element, 'empty-right-border'); + return; + } else { + if (hasClass(this.element, 'list-right')) { + addClass(this.details.element, 'empty-right-border'); + removeClass(this.details.element, 'empty-left-border'); + } else { + addClass(this.details.element, 'empty-left-border'); + removeClass(this.details.element, 'empty-right-border'); + } + + removeClass(this.listElement, 'empty-right-border'); + removeClass(this.listElement, 'empty-left-border'); + } } + + this.listElement.style.marginTop = '0px'; } private renderDetails(): void {