From e27fb33e56407f4f89c052fccc863eda2a01c7e7 Mon Sep 17 00:00:00 2001 From: Caroline di Vittorio <43390382+carolinedivittorio@users.noreply.github.com> Date: Wed, 1 Jul 2026 15:45:54 -0700 Subject: [PATCH] fix: use global tokens for sidebar filter popover border (#1661) The filter popover renders via base-ui Menu.Portal into document.body, outside the .agents-ui container where the --ui-* CSS variables are scoped. As a result border-[var(--ui-border)] resolved to an undefined variable and border-color fell back to currentColor, producing a strong near-black border (separators/hover/labels were similarly off). Switch the portaled popup styling to the same global shadcn tokens the theme/settings popover (SidebarUserMenu) already uses (border-border, bg-border, bg-muted, text-muted-foreground). These are defined at :root so they resolve inside portals too, and match the settings popover. Co-authored-by: open-swe[bot] (cherry picked from commit 63eb9a08209f683016abf01cdcc548bc5905f158) --- ui/src/components/agents/SidebarFilterMenu.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/src/components/agents/SidebarFilterMenu.tsx b/ui/src/components/agents/SidebarFilterMenu.tsx index fe5ce88b..6eeb0d9b 100644 --- a/ui/src/components/agents/SidebarFilterMenu.tsx +++ b/ui/src/components/agents/SidebarFilterMenu.tsx @@ -21,15 +21,15 @@ import { import { cn } from "@/lib/utils" const POPUP_CLASS = - "z-50 min-w-[12rem] origin-(--transform-origin) overflow-hidden rounded-md border border-[var(--ui-border)] bg-popover p-1 text-popover-foreground shadow-md outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95" + "z-50 min-w-[12rem] origin-(--transform-origin) overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95" const ITEM_CLASS = - "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none select-none data-highlighted:bg-[var(--ui-sidebar-hover)] data-disabled:pointer-events-none data-disabled:opacity-50" + "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none select-none data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50" const LABEL_CLASS = - "px-2 py-1 text-[10px] font-medium tracking-wide text-[var(--ui-text-dim)] uppercase" + "px-2 py-1 text-[10px] font-medium tracking-wide text-muted-foreground uppercase" -const SEPARATOR_CLASS = "my-1 h-px bg-[var(--ui-border)]" +const SEPARATOR_CLASS = "my-1 h-px bg-border" function Indicator() { return @@ -38,7 +38,7 @@ function Indicator() { function CountBadge({ count }: { count: number }) { if (count <= 0) return null return ( - + {count} )