Make mentions clickable

webview-ui/src/components/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef } from "react"
-import { ContextMenuOptionType, ContextMenuQueryItem, getContextMenuOptions } from "../utils/mention-context"
+import { ContextMenuOptionType, ContextMenuQueryItem, getContextMenuOptions } from "../utils/context-mentions"
 import { formatFilePathForTruncation } from "./CodeAccordian"
 
 interface ContextMenuProps {
@@ -109,14 +109,15 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 				ref={menuRef}
 				style={{
 					backgroundColor: "var(--vscode-dropdown-background)",
-					border: "1px solid var(--vscode-dropdown-border)",
+					border: "1px solid var(--vscode-editorGroup-border)",
 					borderRadius: "3px",
+					boxShadow: "0 4px 10px rgba(0, 0, 0, 0.25)",
 					zIndex: 1000,
 					display: "flex",
 					flexDirection: "column",
-					boxShadow: "0 8px 16px rgba(0,0,0,0.24)",
 					maxHeight: "200px",
 					overflowY: "auto",
+					overflow: "hidden",
 				}}>
 				{/* Can't use virtuoso since it requires fixed height and menu height is dynamic based on # of items */}
 				{filteredOptions.map((option, index) => (
@@ -127,7 +128,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							padding: "8px 12px",
 							cursor: isOptionSelectable(option) ? "pointer" : "default",
 							color: "var(--vscode-dropdown-foreground)",
-							borderBottom: "1px solid var(--vscode-dropdown-border)",
+							borderBottom: "1px solid var(--vscode-editorGroup-border)",
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "space-between",