adam/open-swe
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/open-swe.git synced 2026-10-03 22:33:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: use global tokens for sidebar filter popover border (#1661)

Browse source 
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] <open-swe@users.noreply.github.com>
(cherry picked from commit 63eb9a08209f683016abf01cdcc548bc5905f158)
This commit is contained in:
Caroline di Vittorio 2026-07-01 15:45:54 -07:00 • committed by Adam Moussa
parent 582e632f12
commit e27fb33e56
No known key found for this signature in database
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/src/components/agents/SidebarFilterMenu.tsx
View file

@ -21,15 +21,15 @@ import {
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
const POPUP_CLASS = 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 = 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 = 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() { function Indicator() {
return <CheckIcon className="size-3.5 shrink-0" weight="bold" /> return <CheckIcon className="size-3.5 shrink-0" weight="bold" />
@ -38,7 +38,7 @@ function Indicator() {
function CountBadge({ count }: { count: number }) { function CountBadge({ count }: { count: number }) {
if (count <= 0) return null if (count <= 0) return null
return ( return (
<span className="ml-auto rounded bg-[var(--ui-panel-2)] px-1.5 py-0.5 text-[10px] text-[var(--ui-text-muted)]"> <span className="ml-auto rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
{count} {count}
</span> </span>
) )