Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2025-12-24 12:19:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix hover widget out of bounds (#271721)

Browse Source 
* fix hover widget
* glyph hover widget
This commit is contained in:
Paul
2025-10-20 11:39:46 -07:00
committed by GitHub
parent ce8f9521e2
commit 9d45ef57fa
2 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/vs/editor/browser/widget/multiDiffEditor/diffEditorItemTemplate.ts
View File

@@ -113,6 +113,7 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject<
]) as Record<string, HTMLElement>; ]) as Record<string, HTMLElement>;
this.editor = this._register(this._instantiationService.createInstance(DiffEditorWidget, this._elements.editor, { this.editor = this._register(this._instantiationService.createInstance(DiffEditorWidget, this._elements.editor, {
overflowWidgetsDomNode: this._overflowWidgetsDomNode, overflowWidgetsDomNode: this._overflowWidgetsDomNode,
fixedOverflowWidgets: true
}, {})); }, {}));
this.isModifedFocused = observableCodeEditor(this.editor.getModifiedEditor()).isFocused; this.isModifedFocused = observableCodeEditor(this.editor.getModifiedEditor()).isFocused;
this.isOriginalFocused = observableCodeEditor(this.editor.getOriginalEditor()).isFocused; this.isOriginalFocused = observableCodeEditor(this.editor.getOriginalEditor()).isFocused;

25
src/vs/editor/contrib/hover/browser/glyphHoverWidget.ts
View File

@@ -19,6 +19,7 @@ const $ = dom.$;
export class GlyphHoverWidget extends Disposable implements IOverlayWidget, IHoverWidget { export class GlyphHoverWidget extends Disposable implements IOverlayWidget, IHoverWidget {
public static readonly ID = 'editor.contrib.modesGlyphHoverWidget'; public static readonly ID = 'editor.contrib.modesGlyphHoverWidget';
public readonly allowEditorOverflow = true;
private readonly _editor: ICodeEditor; private readonly _editor: ICodeEditor;
private readonly _hover: HoverWidget; private readonly _hover: HoverWidget;
@@ -173,8 +174,28 @@ export class GlyphHoverWidget extends Disposable implements IOverlayWidget, IHov
const nodeHeight = this._hover.containerDomNode.clientHeight; const nodeHeight = this._hover.containerDomNode.clientHeight;
const top = topForLineNumber - editorScrollTop - ((nodeHeight - lineHeight) / 2); const top = topForLineNumber - editorScrollTop - ((nodeHeight - lineHeight) / 2);
const left = editorLayout.glyphMarginLeft + editorLayout.glyphMarginWidth + (laneOrLine === 'lineNo' ? editorLayout.lineNumbersWidth : 0); const left = editorLayout.glyphMarginLeft + editorLayout.glyphMarginWidth + (laneOrLine === 'lineNo' ? editorLayout.lineNumbersWidth : 0);
this._hover.containerDomNode.style.left = `${left}px`;
this._hover.containerDomNode.style.top = `${Math.max(Math.round(top), 0)}px`; // Constrain the hover widget to stay within the editor bounds
const editorHeight = editorLayout.height;
const maxTop = editorHeight - nodeHeight;
const constrainedTop = Math.max(0, Math.min(Math.round(top), maxTop));
const fixedOverflowWidgets = this._editor.getOption(EditorOption.fixedOverflowWidgets);
if (fixedOverflowWidgets) {
// Use fixed positioning relative to the viewport
const editorDomNode = this._editor.getDomNode();
if (editorDomNode) {
const editorRect = dom.getDomNodePagePosition(editorDomNode);
this._hover.containerDomNode.style.position = 'fixed';
this._hover.containerDomNode.style.left = `${editorRect.left + left}px`;
this._hover.containerDomNode.style.top = `${editorRect.top + constrainedTop}px`;
}
} else {
// Use absolute positioning relative to the editor
this._hover.containerDomNode.style.position = 'absolute';
this._hover.containerDomNode.style.left = `${left}px`;
this._hover.containerDomNode.style.top = `${constrainedTop}px`;
}
this._hover.containerDomNode.style.zIndex = '11'; // 1 more than the zone widget at 10 (#233819) this._hover.containerDomNode.style.zIndex = '11'; // 1 more than the zone widget at 10 (#233819)
} }