coder · jaaydenh · May 1, 2025 · Feb 17, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/site/e2e/tests/groups/removeMember.spec.ts b/site/e2e/tests/groups/removeMember.spec.ts
@@ -33,9 +33,8 @@ test("remove member", async ({ page, baseURL }) => {
 	await expect(page).toHaveTitle(`${group.display_name} - Coder`);
 
 	const userRow = page.getByRole("row", { name: member.username });
-	await userRow.getByRole("button", { name: "More options" }).click();
-
-	const menu = page.locator("#more-options");
+	await userRow.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
 	await menu.getByText("Remove").click({ timeout: 1_000 });
 
 	await expect(page.getByText("Member removed successfully.")).toBeVisible();

diff --git a/site/e2e/tests/organizationGroups.spec.ts b/site/e2e/tests/organizationGroups.spec.ts
@@ -79,8 +79,10 @@ test("create group", async ({ page }) => {
 	await expect(page.getByText("No users found")).toBeVisible();
 
 	// Remove someone from the group
-	await addedRow.getByLabel("More options").click();
-	await page.getByText("Remove").click();
+	await addedRow.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
+	await menu.getByText("Remove").click();
+
 	await expect(addedRow).not.toBeVisible();
 
 	// Delete the group

diff --git a/site/e2e/tests/organizationMembers.spec.ts b/site/e2e/tests/organizationMembers.spec.ts
@@ -39,8 +39,9 @@ test("add and remove organization member", async ({ page }) => {
 	await expect(addedRow.getByText("+1 more")).toBeVisible();
 
 	// Remove them from the org
-	await addedRow.getByLabel("More options").click();
-	await page.getByText("Remove").click(); // Click the "Remove" option
+	await addedRow.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
+	await menu.getByText("Remove").click();
 	await page.getByRole("button", { name: "Remove" }).click(); // Click "Remove" in the confirmation dialog
 	await expect(addedRow).not.toBeVisible();
 });
diff --git a/site/e2e/tests/organizations/customRoles/customRoles.spec.ts b/site/e2e/tests/organizations/customRoles/customRoles.spec.ts
@@ -37,8 +37,8 @@ test.describe("CustomRolesPage", () => {
 		await expect(roleRow.getByText(customRole.display_name)).toBeVisible();
 		await expect(roleRow.getByText("organization_member")).toBeVisible();
 
-		await roleRow.getByRole("button", { name: "More options" }).click();
-		const menu = page.locator("#more-options");
+		await roleRow.getByRole("button", { name: "Open menu" }).click();
+		const menu = page.getByRole("menu");
 		await menu.getByText("Edit").click();
 
 		await expect(page).toHaveURL(
@@ -118,7 +118,7 @@ test.describe("CustomRolesPage", () => {
 
 		// Verify that the more menu (three dots) is not present for built-in roles
 		await expect(
-			roleRow.getByRole("button", { name: "More options" }),
+			roleRow.getByRole("button", { name: "Open menu" }),
 		).not.toBeVisible();
 
 		await deleteOrganization(org.name);
@@ -175,9 +175,9 @@ test.describe("CustomRolesPage", () => {
 		await page.goto(`/organizations/${org.name}/roles`);
 
 		const roleRow = page.getByTestId(`role-${customRole.name}`);
-		await roleRow.getByRole("button", { name: "More options" }).click();
+		await roleRow.getByRole("button", { name: "Open menu" }).click();
 
-		const menu = page.locator("#more-options");
+		const menu = page.getByRole("menu");
 		await menu.getByText("Delete…").click();
 
 		const input = page.getByRole("textbox");

diff --git a/site/e2e/tests/updateTemplate.spec.ts b/site/e2e/tests/updateTemplate.spec.ts
@@ -53,8 +53,10 @@ test("add and remove a group", async ({ page }) => {
 	await expect(row).toBeVisible();
 
 	// Now remove the group
-	await row.getByLabel("More options").click();
-	await page.getByText("Remove").click();
+	await row.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
+	await menu.getByText("Remove").click();
+
 	await expect(page.getByText("Group removed successfully!")).toBeVisible();
 	await expect(row).not.toBeVisible();
 });

diff --git a/site/e2e/tests/users/removeUser.spec.ts b/site/e2e/tests/users/removeUser.spec.ts
@@ -17,9 +17,9 @@ test("remove user", async ({ page, baseURL }) => {
 	await expect(page).toHaveTitle("Users - Coder");
 
 	const userRow = page.getByRole("row", { name: user.email });
-	await userRow.getByRole("button", { name: "More options" }).click();
-	const menu = page.locator("#more-options");
-	await menu.getByText("Delete").click();
+	await userRow.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
+	await menu.getByText("Delete…").click();
 
 	const dialog = page.getByTestId("dialog");
 	await dialog.getByLabel("Name of the user to delete").fill(user.username);

diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx
@@ -196,7 +196,7 @@ export const DropdownMenuSeparator = forwardRef<
 >(({ className, ...props }, ref) => (
 	<DropdownMenuPrimitive.Separator
 		ref={ref}
-		className={cn(["-mx-1 my-3 h-px bg-border"], className)}
+		className={cn(["-mx-1 my-2 h-px bg-border"], className)}
 		{...props}
 	/>
 ));

diff --git a/site/src/components/MoreMenu/MoreMenu.stories.tsx b/site/src/components/MoreMenu/MoreMenu.stories.tsx
diff --git a/site/src/components/MoreMenu/MoreMenu.tsx b/site/src/components/MoreMenu/MoreMenu.tsx
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx
@@ -3,13 +3,14 @@ import Checkbox from "@mui/material/Checkbox";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import type { BannerConfig } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import {
-	MoreMenu,
-	MoreMenuContent,
-	MoreMenuItem,
-	MoreMenuTrigger,
-	ThreeDotsButton,
-} from "components/MoreMenu/MoreMenu";
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "components/DropdownMenu/DropdownMenu";
+import { EllipsisVertical } from "lucide-react";
 import type { FC } from "react";
 
 interface AnnouncementBannerItemProps {
@@ -48,17 +49,25 @@ export const AnnouncementBannerItem: FC<AnnouncementBannerItemProps> = ({
 			</TableCell>
 
 			<TableCell>
-				<MoreMenu>
-					<MoreMenuTrigger>
-						<ThreeDotsButton />
-					</MoreMenuTrigger>
-					<MoreMenuContent>
-						<MoreMenuItem onClick={() => onEdit()}>Edit&hellip;</MoreMenuItem>
-						<MoreMenuItem onClick={() => onDelete()} danger>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button size="icon-lg" variant="subtle" aria-label="Open menu">
+							<EllipsisVertical aria-hidden="true" />
+							<span className="sr-only">Open menu</span>
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuItem onClick={() => onEdit()}>
+							Edit&hellip;
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							className="text-content-destructive focus:text-content-destructive"
+							onClick={() => onDelete()}
+						>
 							Delete&hellip;
-						</MoreMenuItem>
-					</MoreMenuContent>
-				</MoreMenu>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
 			</TableCell>
 		</TableRow>
 	);