Fix ContextView absolute positioning when container lacks position: relative

[Copilot]

Hover tooltips (e.g., Copy button in diagnostic hovers) were positioned incorrectly when the container element didn't have position: relative. The offset matched exactly the distance from the container's nearest positioned ancestor.

Root cause: doLayout() assumed the container was the CSS containing block for absolute positioning. For position: absolute, the containing block is actually the nearest positioned ancestor (via offsetParent), not necessarily the container.

Fix: Use offsetParent to find the actual containing block:

// Before: assumed container is the containing block
const containerPosition = DOM.getDomNodePagePosition(this.container!);

// After: find actual containing block via offsetParent
const offsetParent = this.view.offsetParent;
if (offsetParent && DOM.isHTMLElement(offsetParent)) {
    positionOffset = DOM.getDomNodePagePosition(offsetParent);
} else {
    positionOffset = { top: 0, left: 0 }; // viewport as containing block
}

Changes:

• src/vs/base/browser/ui/contextview/contextview.ts: Updated doLayout() to use offsetParent for position offset calculation in absolute positioning mode

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug] Copy button tooltip of diagnostic text is offset and uses different font</issue_title>
<issue_description>### Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.55.0-dev-20251107#XQAAAAK_BQAAAAAAAABBqQkHQ5NjdPxdelU4WDonmpKI0l8ZnxhC4nZWoCuAJKxoZZcn0NoL7hbtycI-KVso3hyOWZPoky0J3nxQx8SlilhIluPIv9y8o1iPogzx7efS0zuJUWlhXey9rLBx5DHddr7uilPEWupI5TlBi5gNvhEE1blHHx0J4OkmWGx7Rfr5wBMG33E8LTEj0ovfa8eq7N7kjZl-uvoQ71URuDraU4JMamg_HhlnjSTth2GYXUcrt-r5Cnxa-fLHN4y55s1xbFbEhrvoWdkYavRsFzrkQFoSEfivMn5w-WegZ3hJeQ7nTaLVCerXmEibf40FBsfxvSQojfcr-sTYOVdlmVR6u3_a8-AyfxZoU5wzUY2d3iOkdqgs21MWkQh07GJgbLE4AjHEPORwlDMxpj4VLmO43V-H-upaKorvH2W4MlNGOEeya0bz08I6y6Tv5Y4qSbVvg2lRv8jl6r9_3vMk6k5387EWOXc3vQZ2fyQUk0tYqBp-xz1HBbJ3PPvuUNb9gsXWaAylxa7N-l-Ls1ZIMJ1Kz9oOPIFqQRJtMRJwOJ8pUIKtri7fLsDtQ6laa0Kw3UDv1oGEO65hsoXf_XBfR65uur_Zf4Gn7oaeypEFQyvyKzAB6UH7DMeqOXaut2YIc-QiJBDZgdC_orsMrK-xiZMJCDlThssRRHo4MnFbyCjmUalgo3_v3AnZIBnd9r_ee3qijNPadZa4FzclWomdtiE09v2WKn9OMhMJU3Ax7cPr9Iz27BTkoLcPMW1ixO7AMq9YadJlxqOSpQAB76ZP6IEP1ipKSGgzxScZ-H2s3fN-QxxF9zKw2IzygjlHvFenul6z9b-nNMXg_YoPRdKALbODwu5C9W43GQMRAxUoUc5rjow5eTJgU4VyIPB9LD7XGF4Jr7XkoRtjSLIFjsdNeBUAL_3KoC-AANghn89M5-f8ZPwU6O7aVd3dXWmrcYNP-cJwSG8bhUBeso-mMPY2V7TimryWJPh9ixfNfXz6ZZ87GdmE90yWk0L4-v5Qbo7ku7Ho3OO_592AOlbpUMT5twy9h_7U6iI

Monaco Editor Playground Code

Reproduction Steps

Use the "Configure JavaScript Defaults" example, enable semantic validation, introduce an error in the code (e.g. next() -> nex()) and add div with some height into the HTML snippet before the editor

<div style="height: 50px">test</div>

Actual (Problematic) Behavior

Hovering the new "Copy" button of the diagnostic text shows the tooltip offset from the button by the height of the preceding HTML element (in this example 50px), and the text itself uses a serif font different from the rest of the editor

Expected Behavior

Tooltip is aligned properly and uses consistent font.

Additional Context

0.55.0-dev-20251107</issue_description>

<agent_instructions>You need to find the place where we find the coordinates of the target dom element for which the hover is showing for. Possibly we are not using the correct Dom property. The example mentioned in the issue has the following dom setup:

<div style="height: 50px">test</div>
<div id="container" style="height: 100%"></div>

The container is the editor. When creating a hover for an action inside the editor area, the hover is placed 50px too high.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [Bug] Copy button tooltip of diagnostic text is offset and uses different font monaco-editor#5112

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.