code action widget styling to match context menu

Author: Justin Chen

src/vs/editor/contrib/codeAction/browser/codeActionMenu.ts

@@ -90,7 +90,7 @@ export interface ICodeActionMenuTemplateData {
 }
 
 const TEMPLATE_ID = 'codeActionWidget';
-const codeActionLineHeight = 27;
+const codeActionLineHeight = 26;
 
 class CodeMenuRenderer implements IListRenderer<ICodeActionMenuItem, ICodeActionMenuTemplateData> {
 	get templateId(): string { return TEMPLATE_ID; }
@@ -256,8 +256,8 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		// resize observer - can be used in the future since list widget supports dynamic height but not width
 		const maxWidth = Math.max(...arr);
 
-		// 40 is the additional padding for the list widget (20 left, 20 right)
-		renderMenu.style.width = maxWidth + 40 + 'px';
+		// 40 is the additional padding for the list widget (26px left, 26px right)
+		renderMenu.style.width = maxWidth + 52 + 'px';
 		this.codeActionList.value?.layout(height, maxWidth);
 
 		// List selection

src/vs/editor/contrib/codeAction/browser/media/action.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .codeActionMenuWidget {
-	padding: 10px 0px 10px 0px;
+	padding: 8px 0px 8px 0px;
 	overflow: auto;
 	font-size: 13px;
 	border-radius: 5px;
@@ -14,9 +14,8 @@
 	/* flex-direction: column;
 	flex: 0 1 auto; */
 	width: 100%;
-	border-style: solid;
-	border-width: 1px;
-	border-color: var(--vscode-editorSuggestWidget-border);
+	border-width: 0px;
+	border-color: none;
 	background-color: var(--vscode-menu-background);
 	color: var(--vscode-menu-foreground);
 }
@@ -62,7 +61,7 @@
 	display: flex;
 	-mox-box-sizing: border-box;
 	box-sizing: border-box;
-	padding: 0px 20px 0px 20px;
+	padding: 0px 26px 0px 26px;
 	background-repeat: no-repeat;
 	background-position: 2px 2px;
 	white-space: nowrap;