Change:
Source control warning not aligned on the right hand side with the input field: <img width="473" alt="image" src="https://user-"
Draft PR here but I feel that there is a better way. For whatever reason the editor within SCM input is not as wide as the input it is rendered in—or something like that. Open to ideas!
Here is the updated layout: <img width="567" alt="image" src="https://user-"

Discussion:
.scm-view .scm-editor-container.synthetic-focus, .monaco-workbench .part.panel .scm-view .scm-editor-container.synthetic-focus { outline: 1px solid var(--vscode-focusBorder); <ins> outline-offset: -1px; </ins> } .scm-view .scm-editor-container.validation-info { outline: 1px solid var(--vscode-inputValidation-infoBorder) !important; <ins> outline-offset: -1px; </ins> } .scm-view .scm-editor-container.validation-warning { outline: 1px solid var(--vscode-inputValidation-warningBorder) !important; <ins> outline-offset: -1px; </ins> } .scm-view .scm-editor-container.validation-error { outline: 1px solid var(--vscode-inputValidation-errorBorder) !important; <ins> outline-offset: -1px; </ins> } .scm-editor-validation-container {

border-width: 1px; border-style: solid; border-top: none; <ins> border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; </ins> padding: 2px; }

this.validationDisposable = this.contextViewService.showContextView({ getAnchor: () => this.editorContainer, render: container => { <ins> this.editorContainer.style.borderBottomLeftRadius = '0'; this.editorContainer.style.borderBottomRightRadius = '0'; </ins> const validationContainer = append(container, $('.scm-editor-validation-container')); validationContainer.classList.toggle('validation-info', this.validation!.type === InputValidationType.Information); validationContainer.classList.toggle('validation-warning', this.validation!.type === InputValidationType.Warning); validationContainer.classList.toggle('validation-error', this.validation!.type === InputValidationType.Error); <del> validationContainer.style.width = `${this.editorContainer.clientWidth}px`; </del> <ins> validationContainer.style.width = `${this.editorContainer.clientWidth + 2}px`; </ins> const element = append(validationContainer, $('.scm-editor-validation')); const message = this.validation!.message;

disposables.add(tracker.onDidFocus(() => (this.validationHasFocus = true))); disposables.add(tracker.onDidBlur(() => { this.validationHasFocus = false; <ins> this.editorContainer.style.borderBottomLeftRadius = '2px'; this.editorContainer.style.borderBottomRightRadius = '2px'; </ins> this.contextViewService.hideContextView(); }));

actionHandler: { callback: (link) => { openLinkFromMarkdown(this.openerService, link, message.isTrusted); <ins> this.editorContainer.style.borderBottomLeftRadius = '2px'; this.editorContainer.style.borderBottomRightRadius = '2px'; </ins> this.contextViewService.hideContextView(); }, disposables: disposables

const actionbar = new ActionBar(actionsContainer); const action = new Action('scmInputWidget.validationMessage.close', localize('label.close', "Close"), ThemeIcon.asClassName(Codicon.close), true, () => { this.contextViewService.hideContextView(); <ins> this.editorContainer.style.borderBottomLeftRadius = '2px'; this.editorContainer.style.borderBottomRightRadius = '2px'; </ins> }); disposables.add(actionbar); actionbar.push(action, { icon: true, label: false });

}, onHide: () => { this.validationHasFocus = false; <ins> this.editorContainer.style.borderBottomLeftRadius = '2px'; this.editorContainer.style.borderBottomRightRadius = '2px'; </ins> disposables.dispose(); }, anchorAlignment: AnchorAlignment.LEFT