Add max height to hover (#164093)

Co-authored-by: Daniel Imms <[email protected]>

src/vs/workbench/services/hover/browser/hoverWidget.ts

@@ -258,8 +258,11 @@ export class HoverWidget extends Widget {
 			}
 		};
 
+		// These calls adjust the position depending on spacing.
 		this.adjustHorizontalHoverPosition(targetRect);
 		this.adjustVerticalHoverPosition(targetRect);
+		// This call limits the maximum height of the hover.
+		this.adjustHoverMaxHeight(targetRect);
 
 		// Offset the hover position if there is a pointer so it aligns with the target element
 		this._hoverContainer.style.padding = '';
@@ -410,19 +413,9 @@ export class HoverWidget extends Widget {
 	}
 
 	private adjustVerticalHoverPosition(target: TargetRect): void {
-		// Do not adjust vertical hover position if y cordiante is provided
-		if (this._target.y !== undefined) {
-			return;
-		}
-
-		// When force position is enabled, restrict max height
-		if (this._forcePosition) {
-			const padding = (this._hoverPointer ? Constants.PointerSize : 0) + Constants.HoverBorderWidth;
-			if (this._hoverPosition === HoverPosition.ABOVE) {
-				this._hover.containerDomNode.style.maxHeight = `${target.top - padding}px`;
-			} else if (this._hoverPosition === HoverPosition.BELOW) {
-				this._hover.containerDomNode.style.maxHeight = `${window.innerHeight - target.bottom - padding}px`;
-			}
+		// Do not adjust vertical hover position if the y coordinate is provided
+		// or the position is forced
+		if (this._target.y !== undefined || this._forcePosition) {
 			return;
 		}
 
@@ -443,6 +436,25 @@ export class HoverWidget extends Widget {
 		}
 	}
 
+	private adjustHoverMaxHeight(target: TargetRect): void {
+		let maxHeight = window.innerHeight / 2;
+
+		// When force position is enabled, restrict max height
+		if (this._forcePosition) {
+			const padding = (this._hoverPointer ? Constants.PointerSize : 0) + Constants.HoverBorderWidth;
+			if (this._hoverPosition === HoverPosition.ABOVE) {
+				maxHeight = Math.min(maxHeight, target.top - padding);
+			} else if (this._hoverPosition === HoverPosition.BELOW) {
+				maxHeight = Math.min(maxHeight, window.innerHeight - target.bottom - padding);
+			}
+		}
+
+		// Make sure not to accidentally enlarge the hover when setting a maxHeight for it
+		maxHeight = Math.min(maxHeight, this._hover.containerDomNode.clientHeight);
+
+		this._hover.containerDomNode.style.maxHeight = `${maxHeight}px`;
+	}
+
 	private setHoverPointerPosition(target: TargetRect): void {
 		if (!this._hoverPointer) {
 			return;

src/vs/workbench/services/hover/browser/media/hover.css

@@ -10,6 +10,7 @@
 	/* Must be higher than sash's z-index and terminal canvases */
 	z-index: 40;
 	overflow: hidden;
+	overflow-y: auto;
 	max-width: 700px;
 }