diff --git a/components/graph-coverage.tsx b/components/graph-coverage.tsx index e49e5b9..a7eb96b 100644 --- a/components/graph-coverage.tsx +++ b/components/graph-coverage.tsx @@ -102,7 +102,7 @@ export function GraphCoverageControl({ refreshKey = 0 }: { refreshKey?: number } title="Extraction coverage — what the knowledge graph has covered" aria-expanded={open} onClick={() => setOpen((o) => !o)} - className={`flex size-9 items-center justify-center rounded-xl border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ + className={`flex size-9 items-center justify-center rounded-sm border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ open ? "text-foreground" : "text-muted-foreground hover:text-foreground" }`} > diff --git a/components/graph-view.tsx b/components/graph-view.tsx index e75faa1..9a2dd6b 100644 --- a/components/graph-view.tsx +++ b/components/graph-view.tsx @@ -253,7 +253,7 @@ function GraphCostControl({ costs }: { costs: GraphCostSummary }) { title="Graph pipeline costs — click for the breakdown" aria-expanded={open} onClick={() => setOpen((o) => !o)} - className={`rounded-lg px-2 py-1 text-xs tabular-nums transition-colors hover:bg-accent ${ + className={`rounded-sm px-2 py-1 text-xs tabular-nums transition-colors hover:bg-accent ${ open ? "text-foreground" : "text-muted-foreground hover:text-foreground" }`} > @@ -361,7 +361,7 @@ function GraphSettingsControl({ title="Rendering settings" aria-expanded={open} onClick={() => setOpen((o) => !o)} - className={`flex size-9 items-center justify-center rounded-xl border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ + className={`flex size-9 items-center justify-center rounded-sm border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ open ? "text-foreground" : "text-muted-foreground hover:text-foreground" }`} > @@ -1155,14 +1155,19 @@ export function GraphView() { rejected the two-row fold); in narrow windows the search is the flexible element and shrinks instead. */}
-
+ {/* z-20 (2026-09-20): the row paints above the cost number below + it — without this, the later-in-DOM cost control layered over + the settings/coverage dropdowns (owner report), still hoverable + and clickable on top of them. The row is a stacking context, so + its open dropdowns cover the number; clicks land on the panel. */} +
{!isEmpty && ( <> {/* Search — its own container (icon + input + no-match note). The header band's flexible element: w-56 normally, shrinks (min-w-0) when the column's width cap binds in narrow windows — the row's other controls are shrink-0. */} -
+
setQuery(e.target.value)} placeholder="Search nodes…" spellCheck={false} - className="h-7 w-full rounded-lg border bg-background pl-8 text-xs outline-none placeholder:text-muted-foreground focus:border-ring" + className="h-7 w-full rounded-sm border bg-background pl-8 text-xs outline-none placeholder:text-muted-foreground focus:border-ring" />
{snapshot !== null && visibleIds.size === 0 && query.trim() !== "" && ( @@ -1191,7 +1196,7 @@ export function GraphView() { {!isEmpty && ( <> {/* Import notes — its own container (36px, header band). */} -
+
fileInputRef.current?.click()} - className="flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50" + className="flex h-7 items-center gap-1.5 rounded-sm px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50" > {importing ? "Importing…" : "Import notes…"}