fix: terminal canvas misalignment on zoom level change

[ammaarrahmed]

Summary

When the user changes the editor zoom level (Ctrl++/Ctrl+-), the integrated terminal canvas fails to repaint and align correctly. The prompt text gets clipped, disappears, or renders with excess blank space. Inline suggestion ghost text also misaligns.

Root Cause

The terminal's dimension calculations (getXtermScaledDimensions, _measureFont) use window.devicePixelRatio for canvas rendering and font measurements, but no listener existed to trigger a layout recalculation when the pixel ratio changed due to zoom. Switching tabs worked around the issue because setVisible(true) calls _resize(), which recalculates dimensions with the now-current DPR.

Fix

Two event listeners are added in the TerminalInstance constructor:

• PixelRatio.onDidChange — fires when devicePixelRatio changes (e.g. browser zoom, display scale)
• onDidChangeZoomLevel — fires from Electron's zoom API (e.g. Ctrl++/Ctrl+-)

Both trigger a shared handler that defers (50 ms for DOM settling) a full layout recalculation:

1. Marks font metrics as stale (_layoutSettingsChanged = true)
2. Clears the WebGL/canvas texture atlas (forceRedraw())
3. Runs the full layout() path to recalculate cols/rows

Precedent

This matches the established pattern used by other VS Code components that already subscribe to PixelRatio.onDidChange:

• Editor (editorDom.ts)
• Color picker widget
• Debug toolbar
• Breadcrumbs widget
• Notebook cells

Demo

Screencast.from.2026-04-11.10-28-43.webm

Testing Checklist

• Ctrl++ / Ctrl+- — terminal repaints correctly, no clipping or blank space
• Tab switching after zoom — still works as before
• Split terminals — both panes recalculate correctly
• Type-check passes (tsgo)
• Layering check passes (valid-layers-check)
• ESLint passes
• Hygiene passes

How to Test

1. Open an integrated terminal
2. Type some text so the prompt is visible
3. Press Ctrl++ or Ctrl+- to zoom in/out
4. Observe the terminal canvas repaints cleanly without clipping, blank space, or misaligned ghost text

Fixes #309160

[Copilot]

Pull request overview

Fixes integrated terminal canvas/text misalignment after zoom changes by triggering a terminal relayout when zoom/DPR changes, ensuring font measurements and xterm rendering are recalculated promptly.

Changes:

• Subscribe to PixelRatio.onDidChange to react to devicePixelRatio changes and trigger a relayout.
• Subscribe to onDidChangeZoomLevel to react to Electron zoom level changes and trigger the same relayout path.
• Force an xterm redraw and mark layout settings as stale before recalculating layout/resize.

[ammaarrahmed]

@microsoft-github-policy-service agree