Fixes microsoft#69391: Reserve extra bottom padding when the hover has a horizontal scrollbar

Author: alexdima

src/vs/base/browser/ui/hover/hoverWidget.ts

@@ -18,7 +18,7 @@ export class HoverWidget extends Disposable {
 
 	public readonly containerDomNode: HTMLElement;
 	public readonly contentsDomNode: HTMLElement;
-	private readonly _scrollbar: DomScrollableElement;
+	public readonly scrollbar: DomScrollableElement;
 
 	constructor() {
 		super();
@@ -31,14 +31,14 @@ export class HoverWidget extends Disposable {
 		this.contentsDomNode = document.createElement('div');
 		this.contentsDomNode.className = 'monaco-hover-content';
 
-		this._scrollbar = this._register(new DomScrollableElement(this.contentsDomNode, {
+		this.scrollbar = this._register(new DomScrollableElement(this.contentsDomNode, {
 			consumeMouseWheelIfScrollbarIsNeeded: true
 		}));
-		this.containerDomNode.appendChild(this._scrollbar.getDomNode());
+		this.containerDomNode.appendChild(this.scrollbar.getDomNode());
 	}
 
 	public onContentsChanged(): void {
-		this._scrollbar.scanDomNode();
+		this.scrollbar.scanDomNode();
 	}
 }
 

src/vs/base/browser/ui/scrollbar/scrollableElement.ts

@@ -175,6 +175,10 @@ export abstract class AbstractScrollableElement extends Widget {
 	private readonly _onWillScroll = this._register(new Emitter<ScrollEvent>());
 	public readonly onWillScroll: Event<ScrollEvent> = this._onWillScroll.event;
 
+	public get options(): Readonly<ScrollableElementResolvedOptions> {
+		return this._options;
+	}
+
 	protected constructor(element: HTMLElement, options: ScrollableElementCreationOptions, scrollable: Scrollable) {
 		super();
 		element.style.overflow = 'hidden';

src/vs/editor/contrib/hover/browser/contentHover.ts

@@ -417,10 +417,11 @@ export class ContentHoverWidget extends Disposable implements IContentWidget {
 
 		this._hover.contentsDomNode.textContent = '';
 		this._hover.contentsDomNode.appendChild(node);
+		this._hover.contentsDomNode.style.paddingBottom = '';
 		this._updateFont();
 
 		this._editor.layoutContentWidget(this);
-		this._hover.onContentsChanged();
+		this.onContentsChanged();
 
 		// Simply force a synchronous render on the editor
 		// such that the widget does not really render with left = '0px'
@@ -429,7 +430,7 @@ export class ContentHoverWidget extends Disposable implements IContentWidget {
 		// See https://github.com/microsoft/vscode/issues/140339
 		// TODO: Doing a second layout of the hover after force rendering the editor
 		this._editor.layoutContentWidget(this);
-		this._hover.onContentsChanged();
+		this.onContentsChanged();
 
 		if (visibleData.stoleFocus) {
 			this._hover.containerDomNode.focus();
@@ -452,6 +453,18 @@ export class ContentHoverWidget extends Disposable implements IContentWidget {
 
 	public onContentsChanged(): void {
 		this._hover.onContentsChanged();
+
+		const scrollDimensions = this._hover.scrollbar.getScrollDimensions();
+		const hasHorizontalScrollbar = (scrollDimensions.scrollWidth > scrollDimensions.width);
+		if (hasHorizontalScrollbar) {
+			// There is just a horizontal scrollbar
+			const extraBottomPadding = `${this._hover.scrollbar.options.horizontalScrollbarSize}px`;
+			if (this._hover.contentsDomNode.style.paddingBottom !== extraBottomPadding) {
+				this._hover.contentsDomNode.style.paddingBottom = extraBottomPadding;
+				this._editor.layoutContentWidget(this);
+				this._hover.onContentsChanged();
+			}
+		}
 	}
 
 	public clear(): void {