shishantbiswas/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-06-02 20:48:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): align workspace combobox styling with model selector (#23181)

Browse Source
This commit is contained in:
Danielle Maywood
2026-03-17 18:46:35 +00:00
committed by GitHub
parent 6fc9f195f1
commit 6b76e30321
3 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/ai-elements/model-selector.test.tsx
+5 -2
View File
@@ -10,7 +10,7 @@ const mockModelOptions: readonly ModelSelectorOption[] = [
},
];
test("does not suppress focus ring styles on the model selector trigger", () => {
test("suppresses mouse-focus ring but keeps keyboard-focus ring on model selector trigger", () => {
render(
<ModelSelector
options={mockModelOptions}
@@ -21,6 +21,9 @@ test("does not suppress focus ring styles on the model selector trigger", () =>
const trigger = screen.getByRole("combobox");
expect(trigger.className).not.toContain("focus:ring-0");
// Mouse-focus ring should be suppressed.
expect(trigger.className).toContain("focus:ring-0");
// Keyboard-focus ring should remain.
expect(trigger.className).toContain("focus-visible:ring-2");
expect(trigger.className).not.toContain("focus-visible:ring-0");
});
site/src/components/ai-elements/model-selector.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ export const ModelSelector: FC<ModelSelectorProps> = ({
<Select value={value} onValueChange={onValueChange} disabled={isDisabled}>
<SelectTrigger
className={cn(
"h-8 w-auto gap-1.5 border-none bg-transparent px-1 text-xs shadow-none transition-colors hover:bg-transparent hover:text-content-primary [&>svg]:transition-colors [&>svg]:hover:text-content-primary",
"h-8 w-auto gap-1.5 border-none bg-transparent px-1 text-xs shadow-none transition-colors hover:bg-transparent hover:text-content-primary focus:ring-0 [&>svg]:transition-colors [&>svg]:hover:text-content-primary",
className,
)}
>
site/src/pages/AgentsPage/AgentCreateForm.tsx
+9 -3
View File
@@ -383,11 +383,17 @@ export const AgentCreateForm: FC<AgentCreateFormProps> = ({
handleWorkspaceChange(value ?? autoCreateWorkspaceValue)
}
>
{/* pointer-events-auto overrides the pointer-events:none
that Radix Select's DismissableLayer sets on
document.body when the Model Selector is open.
Without it the first click only dismisses the
Select and a second click is needed to open
the Combobox. */}
<ComboboxTrigger asChild>
<button
type="button"
disabled={isCreating || workspacesQuery.isLoading}
className="group flex h-8 items-center gap-1.5 border-none bg-transparent px-1 text-xs text-content-secondary shadow-none transition-colors hover:bg-transparent hover:text-content-primary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
className="pointer-events-auto group flex h-8 items-center gap-1.5 rounded-md border-none bg-transparent px-1 text-xs text-content-secondary shadow-none ring-offset-background transition-colors hover:bg-transparent hover:text-content-primary focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
>
<MonitorIcon className="h-3.5 w-3.5 shrink-0 text-content-secondary transition-colors group-hover:text-content-primary" />
<span>{selectedWorkspaceLabel ?? "Workspace"}</span>
@@ -396,8 +402,8 @@ export const AgentCreateForm: FC<AgentCreateFormProps> = ({
</ComboboxTrigger>
<ComboboxContent
side="top"
align="center"
className="w-72 [&_[cmdk-item]]:text-xs"
align="start"
className="w-72 bg-surface-primary border-border [&_[cmdk-root]]:bg-surface-primary [&_[cmdk-item]]:text-xs [&_[cmdk-item]>svg:last-child]:ml-auto"
>
<ComboboxInput placeholder="Search workspaces..." />
<ComboboxList>