Fixes #26244 prevent double border

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

src/vs/editor/contrib/suggest/browser/suggestWidget.ts

@@ -948,14 +948,42 @@ export class SuggestWidget implements IContentWidget, IDelegate<ICompletionItem>
 	}
 
 	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 {