Merge pull request #281210 from microsoft/copilot/fix-suggest-widget-placement

Add NORTH placement for suggest details when forceRenderingAbove is used

Author: jrieken

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

@@ -406,15 +406,25 @@ export class SuggestDetailsOverlay implements IOverlayWidget {
 		})();
 
 		// SOUTH
-		const southPacement: Placement = (function () {
+		const southPlacement: Placement = (function () {
 			const left = anchorBox.left;
 			const top = -info.borderWidth + anchorBox.top + anchorBox.height;
 			const maxSizeBottom = new dom.Dimension(anchorBox.width - info.borderHeight, bodyBox.height - anchorBox.top - anchorBox.height - info.verticalPadding);
 			return { top, left, fit: maxSizeBottom.height - size.height, maxSizeBottom, maxSizeTop: maxSizeBottom, minSize: defaultMinSize.with(maxSizeBottom.width) };
 		})();
 
+		// NORTH
+		const northPlacement: Placement = (function () {
+			const left = anchorBox.left;
+			const maxSizeTop = new dom.Dimension(anchorBox.width - info.borderHeight, anchorBox.top - info.verticalPadding);
+			const top = Math.max(info.verticalPadding, anchorBox.top - size.height);
+			return { top, left, fit: maxSizeTop.height - size.height, maxSizeTop, maxSizeBottom: maxSizeTop, minSize: defaultMinSize.with(maxSizeTop.width) };
+		})();
+
 		// take first placement that fits or the first with "least bad" fit
-		const placements = [eastPlacement, westPlacement, southPacement];
+		// when the suggest widget is rendering above the cursor (preferAlignAtTop=false), prefer NORTH over SOUTH
+		const verticalPlacement = preferAlignAtTop ? southPlacement : northPlacement;
+		const placements = [eastPlacement, westPlacement, verticalPlacement];
 		const placement = placements.find(p => p.fit >= 0) ?? placements.sort((a, b) => b.fit - a.fit)[0];
 
 		// top/bottom placement
@@ -445,7 +455,10 @@ export class SuggestDetailsOverlay implements IOverlayWidget {
 		}
 
 		let { top, left } = placement;
-		if (!alignAtTop && height > anchorBox.height) {
+		if (placement === northPlacement) {
+			// For NORTH placement, position the details above the anchor
+			top = anchorBox.top - height + info.borderWidth;
+		} else if (!alignAtTop && height > anchorBox.height) {
 			top = bottom - height;
 		}
 		const editorDomNode = this._editor.getDomNode();
@@ -457,7 +470,15 @@ export class SuggestDetailsOverlay implements IOverlayWidget {
 		}
 		this._applyTopLeft({ left, top });
 
-		this._resizable.enableSashes(!alignAtTop, placement === eastPlacement, alignAtTop, placement !== eastPlacement);
+		// enableSashes(north, east, south, west)
+		// For NORTH placement: enable north sash (resize upward from top), disable south (can't resize into the anchor)
+		// Also enable west sash for horizontal resizing, consistent with SOUTH placement
+		// For SOUTH placement and EAST/WEST placements: use existing logic based on alignAtTop
+		if (placement === northPlacement) {
+			this._resizable.enableSashes(true, false, false, true);
+		} else {
+			this._resizable.enableSashes(!alignAtTop, placement === eastPlacement, alignAtTop, placement !== eastPlacement);
+		}
 
 		this._resizable.minSize = placement.minSize;
 		this._resizable.maxSize = maxSize;