From 41238e8906f4d89166afb455e5e87e4330f1c5e7 Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Wed, 26 Aug 2026 12:40:49 -0700
Subject: [PATCH] fix(site/src): use default combobox dropdown surface (#28613)

Combobox dropdowns were forcing the migrated menu styling in a few
places: secondary menu surfaces, surface-quaternary borders, square item
highlights, tertiary selected-row highlights, and a tertiary footer
hover in the workspace template dropdown.

Use the shared combobox defaults instead: primary menu surfaces,
`border-border-default`, padded lists so highlights do not run to the
edge, rounded item highlights, and the standard secondary selected-row
highlight. Remove callsite overrides that were preventing the shared
defaults from applying to workspace, filter, and version dropdowns.

> This PR was generated by Coder Agents on behalf of @tracyjohnsonux.

(cherry picked from commit 2eb9e4fbe8b283726891406d23ea483664f1c857)
---
 site/src/components/Combobox/Combobox.tsx          | 14 ++++++++------
 site/src/components/Filter/SelectFilter.tsx        |  9 ++-------
 .../ChangeWorkspaceVersionDialog.tsx               |  6 +-----
 site/src/pages/WorkspacesPage/WorkspacesButton.tsx |  6 +++---
 4 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx
index d08e56ac19c..347c4322e34 100644
--- a/site/src/components/Combobox/Combobox.tsx
+++ b/site/src/components/Combobox/Combobox.tsx
@@ -114,21 +114,23 @@ export const ComboboxContent = ({
 		<PopoverContent
 			ref={ref}
 			className={cn(
-				"w-auto bg-surface-secondary border-surface-quaternary overflow-y-auto text-sm",
+				"w-auto border-border-default overflow-y-auto text-sm",
 				className,
 			)}
 			{...props}
 		>
-			<Command className="bg-surface-secondary" shouldFilter={shouldFilter}>
-				{children}
-			</Command>
+			<Command shouldFilter={shouldFilter}>{children}</Command>
 		</PopoverContent>
 	);
 };
 
 export const ComboboxInput = CommandInput;
 
-export const ComboboxList = CommandList;
+export const ComboboxList: React.FC<
+	React.ComponentPropsWithRef<typeof CommandList>
+> = ({ className, ...props }) => {
+	return <CommandList className={cn("p-2", className)} {...props} />;
+};
 
 export const ComboboxItem = ({
 	children,
@@ -143,7 +145,7 @@ export const ComboboxItem = ({
 	return (
 		<CommandItem
 			value={value}
-			className={cn(className, "rounded-none")}
+			className={className}
 			onSelect={(itemValue) => {
 				setOpen(false);
 				// Toggle behavior: selecting the same value deselects it.
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
index 339e8aa7e83..85ff2ed974a 100644
--- a/site/src/components/Filter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -75,16 +75,11 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 				shouldFilter={false}
 			>
 				{selectFilterSearch}
-				<ComboboxList
-					className={cn(
-						!selectFilterSearch && "border-t-0",
-						"border-surface-quaternary",
-					)}
-				>
+				<ComboboxList className={cn(!selectFilterSearch && "border-t-0")}>
 					{options !== undefined ? (
 						options.map((option) => (
 							<ComboboxItem
-								className="px-4 data-[selected=true]:bg-surface-tertiary font-normal gap-4"
+								className="px-4 font-normal gap-4"
 								key={option.value}
 								value={option.value}
 								keywords={[option.label]}
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
index dffb8eb6d5d..e06d45cad0b 100644
--- a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
+++ b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.tsx
@@ -22,7 +22,6 @@ import type { SelectFilterOption } from "#/components/Filter/SelectFilter";
 import { FormFields } from "#/components/Form/Form";
 import { Loader } from "#/components/Loader/Loader";
 import { TemplateUpdateMessage } from "#/modules/templates/TemplateUpdateMessage";
-import { cn } from "#/utils/cn";
 import { createDayString } from "#/utils/createDayString";
 
 type ChangeWorkspaceVersionDialogProps = {
@@ -115,10 +114,7 @@ export const ChangeWorkspaceVersionDialog: FC<
 													key={option.id}
 													value={option.id}
 													keywords={[option.name]}
-													className={cn(
-														"px-3 py-2 font-normal",
-														"data-[selected=true]:bg-surface-tertiary",
-													)}
+													className="px-3 py-2 font-normal"
 												>
 													<AvatarData
 														avatar={
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 27f649a4fa4..c83c5f87e59 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -65,7 +65,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 			</ComboboxTrigger>
 			<ComboboxContent
 				align="end"
-				className="w-[320px] max-w-[320px] overflow-hidden bg-surface-secondary border-surface-quaternary"
+				className="w-[320px] max-w-[320px] overflow-hidden"
 			>
 				<ComboboxInput
 					placeholder="Type/select a workspace template"
@@ -90,7 +90,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 								key={template.id}
 								value={template.id}
 								keywords={[template.display_name, template.name]}
-								className="px-4 data-[selected=true]:bg-surface-tertiary font-normal gap-3 [&>svg:last-child]:hidden"
+								className="px-4 font-normal gap-3 [&>svg:last-child]:hidden"
 							>
 								<Avatar
 									variant="icon"
@@ -124,7 +124,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 				<div className="shrink-0 border-0 border-t border-solid border-border py-1">
 					<RouterLink
 						to="/templates"
-						className="flex items-center gap-3 px-4 py-2 text-sm text-content-link no-underline outline-none hover:bg-surface-tertiary hover:no-underline focus:bg-surface-tertiary"
+						className="flex items-center gap-3 rounded-sm px-4 py-2 text-sm text-content-link no-underline outline-none hover:bg-surface-secondary hover:no-underline focus:bg-surface-secondary"
 					>
 						<ExternalLinkIcon className="size-icon-xs" />
 						<span>See all templates</span>