Change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes/No <!-- If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. --<!-- Issues caused by an extension need to be reported directly to the extension publisher. The 'Help Report Issue' dialog can assist with this. --- VS Code Version: OS Version: Type: Bug Using editor.experimental.useCustomCodeActionMenu, the menu doesn't match up with the colors of enabled/disabled options or the background of the other context menus

Discussion:
} const TEMPLATE_ID = 'codeActionWidget'; <del> const codeActionLineHeight = 27; </del> <ins> const codeActionLineHeight = 26; </ins> class CodeMenuRenderer implements IListRenderer<ICodeActionMenuItem, ICodeActionMenuTemplateData> { get templateId(): string { return TEMPLATE_ID; }

); renderDisposables.add(this.codeActionList.value.onDidChangeSelection(e => this._onListSelection(e))); <ins> renderDisposables.add(this._editor.onDidLayoutChange(e => this.hideCodeActionWidget())); </ins> // Populating the list widget and tracking enabled options. inputArray.forEach((item, index) => {

const maxWidth = Math.max(...arr); // 40 is the additional padding for the list widget (20 left, 20 right) <del> renderMenu.style.width = maxWidth + 40 + 'px'; </del> <ins> renderMenu.style.width = maxWidth + 52 + 'px'; </ins> this.codeActionList.value?.layout(height, maxWidth); // List selection

*--------------------------------------------------------------------------------------------*/ .codeActionMenuWidget { <del> padding: 10px 0px 10px 0px; </del> <ins> padding: 8px 0px 8px 0px; </ins> overflow: auto; font-size: 13px; border-radius: 5px;

/* flex-direction: column; flex: 0 1 auto; */ width: 100%; <del> border-style: solid; border-width: 1px; border-color: var(--vscode-editorSuggestWidget-border); background-color: var(--vscode-editorSuggestWidget-background); </del> <ins> border-width: 0px; border-color: none; background-color: var(--vscode-menu-background); color: var(--vscode-menu-foreground); </ins> } .codeActionMenuWidget .monaco-list:not(.element-focused):focus:before {

-ms-user-select: none; border: none !important; border-width: 0px !important; <del> color: var(red) !important; </del> } /* .codeActionMenuWidget .monaco-list:not(.element-focus) {

display: flex; -mox-box-sizing: border-box; box-sizing: border-box; <del> padding: 0px 20px 0px 20px; </del> <ins> padding: 0px 26px 0px 26px; </ins> background-repeat: no-repeat; background-position: 2px 2px; white-space: nowrap;

.codeActionMenuWidget .monaco-list .monaco-list-row:hover:not(.option-disabled), .codeActionMenuWidget .monaco-list .moncao-list-row.focused:not(.option-disabled) { <ins> color: var(--vscode-menu-selectionForeground) !important; </ins> background-color: var(--vscode-menu-selectionBackground) !important; }

-moz-user-select: none; -ms-user-select: none; user-select: none; <del> color: var(--vscode-list-inactiveSelectionBackground) !important; </del> <ins> color: var(--vscode-disabledForeground) !important; </ins> } .codeActionMenuWidget .monaco-list .separator {