Change:
<!-- Please search existing issues to avoid creating duplicates. --<!-- Also please test using the latest insiders build to make sure your issue has not already been fixed: -- isn't fixed <!-- Use Help Report Issue to prefill these. --- VSCode Version: 1.37.0 OS Version: Windows 10 !
This works just fine for me on OS X and Win10 with vscode insiders. Can you reproduce with latest vscode insiders !
Thanks. I tried and it is indeed fixed in the insider build. However, I can reproduce it for sure on the stable version. The fix should have been included in June update. (seems it was)
There might be some extension which you are using that is modiyfing css and is breaking this. Sorry but I can not reproduce this, either in stable and in insiders. Also no other user seems to be hitting this. Due to that I will close this issue. And yes the fix was included in the June update.
I find the key to reproduction now. Just put in the and you will see the bug.
Yes I acknowledge the bug. The issue is that the breakpoint widget is not updating as the editor font updates. The size of the widget updates, but the font should update as well. I am open to PR that fix this issue Code pointer
Will have a try
Things look more complicated than we expected.  doesn't feel right. The is of 40px height (with font size set to 16) ! It looks more reasonable if setting the height to 20px ! centering thing. The is centred by the styles of (its parent dom) while gets a hardcoded 8px ... !
yes I acknowledge it is not the nicest. Any improvements in that area would be appreciated.
I have gone too deep down the rabbit hole . Leaving it to whoever interested...
This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details . If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider. If you wonder what we are up to, please see our and guidelines. Thanks for your understanding and happy coding!
I understand this issue is not that important. But I don't agree this is out of scope . IMHO, it is at least a bug (although with very low priority).
Agree, let's reopen.
Attempted a PR () for this. Please have a look.
Verifier: Change the editor.fontSize, add a conditional breakpoint and make sure the text in the breakpoint widget is centered. Or can just try in VS COde insiders from Thursday and let us know how it behaves for him
Thank you! I confirm it is fixed in the insider build.
Thanks for letting us know. Adding verified label.

Discussion:
import { getSimpleEditorOptions, getSimpleCodeEditorWidgetOptions } from 'vs/workbench/contrib/codeEditor/browser/simpleEditorOptions'; import { IRange, Range } from 'vs/editor/common/core/range'; import { onUnexpectedError } from 'vs/base/common/errors'; <ins> import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IEditorOptions, EditorOption } from 'vs/editor/common/config/editorOptions'; </ins> const $ = dom.$; const IPrivateBreakpointWidgetService = createDecorator<IPrivateBreakpointWidgetService>('privateBreakpointWidgetService');

_serviceBrand: undefined; private selectContainer!: HTMLElement; <ins> private inputContainer!: HTMLElement; </ins> private input!: IActiveCodeEditor; private toDispose: lifecycle.IDisposable[]; private conditionInput = '';

private logMessageInput = ''; private breakpoint: IBreakpoint | undefined; private context: Context; <ins> private heightInPx: number; </ins> constructor(editor: ICodeEditor, private lineNumber: number, private column: number | undefined, context: Context | undefined, @IContextViewService private readonly contextViewService: IContextViewService,

@IInstantiationService private readonly instantiationService: IInstantiationService, @IModelService private readonly modelService: IModelService, @ICodeEditorService private readonly codeEditorService: ICodeEditorService, <ins> @IConfigurationService private readonly _configurationService: IConfigurationService </ins> ) { super(editor, { showFrame: true, showArrow: false, frameWidth: 1 });

this.input.focus(); }); <del> this.createBreakpointInput(dom.append(container, $('.inputContainer'))); </del> <ins> this.inputContainer = $('.inputContainer'); this.createBreakpointInput(dom.append(container, this.inputContainer)); </ins> this.input.getModel().setValue(this.getInputValue(this.breakpoint)); this.toDispose.push(this.input.getModel().onDidChangeContent(() => {

} protected _doLayout(heightInPixel: number, widthInPixel: number): void { <ins> this.heightInPx = heightInPixel; </ins> this.input.layout({ height: heightInPixel, width: widthInPixel - 113 }); <ins> this.centerInputVertically(); </ins> } private createBreakpointInput(container: HTMLElement): void {

const scopedInstatiationService = this.instantiationService.createChild(new ServiceCollection( [IContextKeyService, scopedContextKeyService], [IPrivateBreakpointWidgetService, this])); <del> const options = getSimpleEditorOptions(); </del> <ins> const options = this.createEditorOptions(); </ins> const codeEditorWidgetOptions = getSimpleCodeEditorWidgetOptions(); this.input = <IActiveCodeEditor>scopedInstatiationService.createInstance(CodeEditorWidget, container, options, codeEditorWidgetOptions); CONTEXT_IN_BREAKPOINT_WIDGET.bindTo(scopedContextKeyService).set(true);

return suggestionsPromise; } })); <ins> this.toDispose.push(this._configurationService.onDidChangeConfiguration((e) => { if (e.affectsConfiguration('editor.fontSize') || e.affectsConfiguration('editor.lineHeight')) { this.input.updateOptions(this.createEditorOptions()); this.centerInputVertically(); } })); } private createEditorOptions(): IEditorOptions { const editorConfig = this._configurationService.getValue<IEditorOptions>('editor'); const options = getSimpleEditorOptions(); options.fontSize = editorConfig.fontSize; return options; } private centerInputVertically() { if (this.container) { const lineHeight = this.input.getOption(EditorOption.lineHeight); const lineNum = this.input.getModel().getLineCount(); const newTopMargin = (this.heightInPx - lineNum * lineHeight) / 2; this.inputContainer.style.marginTop = newTopMargin + 'px'; } </ins> } private createDecorations(): IDecorationOptions[] {

.monaco-editor .zone-widget .zone-widget-container.breakpoint-widget .inputContainer { flex: 1; <del> margin-top: 8px; </del> }