Skip to content

Commit 2055001

Browse files
committed
fix inlay hints being offset by 1px in some cases
VS Code previously applied the `vertical-align: middle` CSS rule to all hints, even those that have the same font style as the editor's. This results in inlay hints being 1px lower than they should be. This pull request adds the `isUniform` flag to `_getLayoutInfo()`'s output. It indicates if the inlay hint styles and editor styles match. If they do, the `vertical-align` rule is set to `baseline`, effectively disabling it.
1 parent e775136 commit 2055001

File tree

1 file changed

+14
-4
lines changed

1 file changed

+14
-4
lines changed

src/vs/editor/contrib/inlayHints/browser/inlayHintsController.ts

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -468,7 +468,7 @@ export class InlayHintsController implements IEditorContribution {
468468

469469

470470
//
471-
const { fontSize, fontFamily, padding } = this._getLayoutInfo();
471+
const { fontSize, fontFamily, padding, isUniform } = this._getLayoutInfo();
472472
const fontFamilyVar = '--code-editorInlayHintsFontFamily';
473473
this._editor.getContainerDomNode().style.setProperty(fontFamilyVar, fontFamily);
474474

@@ -493,7 +493,7 @@ export class InlayHintsController implements IEditorContribution {
493493
const cssProperties: CssProperties = {
494494
fontSize: `${fontSize}px`,
495495
fontFamily: `var(${fontFamilyVar}), ${EDITOR_FONT_DEFAULTS.fontFamily}`,
496-
verticalAlign: 'middle',
496+
verticalAlign: isUniform ? 'baseline' : 'middle',
497497
};
498498

499499
if (isNonEmptyArray(item.hint.textEdits)) {
@@ -587,13 +587,23 @@ export class InlayHintsController implements IEditorContribution {
587587

588588
private _getLayoutInfo() {
589589
const options = this._editor.getOption(EditorOption.inlayHints);
590+
const padding = options.padding;
591+
590592
const editorFontSize = this._editor.getOption(EditorOption.fontSize);
593+
const editorFontFamily = this._editor.getOption(EditorOption.fontFamily);
594+
591595
let fontSize = options.fontSize;
592596
if (!fontSize || fontSize < 5 || fontSize > editorFontSize) {
593597
fontSize = editorFontSize;
594598
}
595-
const fontFamily = options.fontFamily || this._editor.getOption(EditorOption.fontFamily);
596-
return { fontSize, fontFamily, padding: options.padding };
599+
600+
const fontFamily = options.fontFamily || editorFontFamily;
601+
602+
const isUniform = !padding
603+
&& fontFamily === editorFontFamily
604+
&& fontSize === editorFontSize;
605+
606+
return { fontSize, fontFamily, padding, isUniform };
597607
}
598608

599609
private _removeAllDecorations(): void {

0 commit comments

Comments
 (0)