Change:
<!-- Do Not Delete This! bugreporttemplate --Helo! I use the code spell checker extension which provides quick fixes for spelling "error"s. Often these are just terms that I've adopted as standard in the repo and don't aim to change. However, with the recent change to use custom context menus instead of the native ones the list of spelling quick fixes causes the refactorings I actually want to use to be out of the window, with no way to scroll them into view. With spell checker extension enabled: <img width="590" alt="image" src="https://user-"Without: <img width="610" alt="image" src="https://user-"Ideally the menu would support scroll. I'd accept an option to use native menus instead (the icons are nice to have but not critical). Alternatively, at minimum perhaps the refactorings could be sorted above quick fixes?
We should also limit the height of the menu. Not very pleasant to have it take up the entire height of the window
Works great, thanks!

Discussion:
getHeight: element => element.kind === ActionListItemKind.Header ? this._headerLineHeight : this._actionLineHeight, getTemplateId: element => element.kind }; <del> this._list = this._register(new List(user, this.domNode, virtualDelegate, [new ActionItemRenderer<IListMenuItem<IActionItem>>(preview, this._keybindingService), new HeaderRenderer()], { </del> <ins> this._list = this._register(new List(user, this.domNode, virtualDelegate, [ new ActionItemRenderer<IListMenuItem<IActionItem>>(preview, this._keybindingService), new HeaderRenderer(), ], { </ins> keyboardSupport: false, accessibilityProvider: { getAriaLabel: element => {

layout(minWidth: number): number { // Updating list height, depending on how many separators and headers there are. const numHeaders = this._allMenuItems.filter(item => item.kind === 'header').length; <del> const height = this._allMenuItems.length * this._actionLineHeight; const heightWithHeaders = height + numHeaders * this._headerLineHeight - numHeaders * this._actionLineHeight; </del> <ins> const itemsHeight = this._allMenuItems.length * this._actionLineHeight; const heightWithHeaders = itemsHeight + numHeaders * this._headerLineHeight - numHeaders * this._actionLineHeight; </ins> this._list.layout(heightWithHeaders); // For finding width dynamically (not using resize observer)

// resize observer - can be used in the future since list widget supports dynamic height but not width const width = Math.max(...itemWidths, minWidth); <del> this._list.layout(heightWithHeaders, width); this.domNode.style.height = `${heightWithHeaders}px`; </del> <ins> const maxVhPrecentage = 0.7; const height = Math.min(heightWithHeaders, document.body.clientHeight * maxVhPrecentage); this._list.layout(height, width); this.domNode.style.height = `${height}px`; </ins> this._list.domFocus(); return width;

outline: 0 !important; } <del> .action-widget .monaco-list .monaco-scrollable-element .monaco-list-rows { height: 100% !important; } </del> .action-widget .monaco-list .monaco-scrollable-element { overflow: visible; }

/* Action bar */ .action-widget .action-widget-action-bar { <del> margin-top: 4px; </del> background-color: var(--vscode-editorHoverWidget-statusBarBackground); border-top: 1px solid var(--vscode-editorHoverWidget-border); }