diff --git a/components/graph-coverage.tsx b/components/graph-coverage.tsx index a21b5a9..e49e5b9 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-11 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-xl 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 2aa6609..e75faa1 100644 --- a/components/graph-view.tsx +++ b/components/graph-view.tsx @@ -361,7 +361,7 @@ function GraphSettingsControl({ title="Rendering settings" aria-expanded={open} onClick={() => setOpen((o) => !o)} - className={`flex size-11 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-xl border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ open ? "text-foreground" : "text-muted-foreground hover:text-foreground" }`} > @@ -1134,24 +1134,35 @@ export function GraphView() { coverage, import, gear — coverage sits between search and import; the gear keeps the corner. items-start (not center) so the search container's no-match note can grow downward - without shifting its siblings — every button is 44px tall, - top alignment pins the row. Coverage renders even when the - graph is EMPTY — an empty graph with unextracted sessions is - exactly when it matters (extract → the graph gains nodes). + without shifting its siblings — every control is 36px tall + (header band, 2026-09-20), top alignment pins the row. + Coverage renders even when the graph is EMPTY — an empty + graph with unextracted sessions is exactly when it matters + (extract → the graph gains nodes). lh-no-drag (2026-09-17): home.tsx's floating drag strip underlays this row — Electron's drag mask ignores z-index, so without an explicit carve-out the controls were - unclickable in the desktop app (owner report). max-w + flex-wrap - (narrow-window wave, 2026-09-17): below the sidebar auto-close - threshold the row wraps to a second line instead of overflowing - left over the header toggle cluster (92px gutter + 36px button); - 9rem keeps one clear column of air alongside it. */} -
-
+ unclickable in the desktop app (owner report). The old + flex-wrap (narrow-window wave, 2026-09-17) folded the row + onto two lines below the sidebar threshold — owner rejected + it (2026-09-20): one row always, the search shrinks (see + the header-band comment on the column below). */} + {/* Header band (owner, 2026-09-20): the controls sit IN the + header's visual row — top-2 aligns with the sidebar toggle's + band (header py-2, toggle h-9), every control slimmed to 36px. + The width cap lives HERE on the absolute element (100% resolves + against the full-bleed parent) — the row NEVER wraps (owner + rejected the two-row fold); in narrow windows the search is + the flexible element and shrinks instead. */} +
+
{!isEmpty && ( <> - {/* Search — its own container (icon + input + no-match note). */} -
+ {/* 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-8 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-lg border bg-background pl-8 text-xs outline-none placeholder:text-muted-foreground focus:border-ring" />
{snapshot !== null && visibleIds.size === 0 && query.trim() !== "" && ( @@ -1176,11 +1187,11 @@ export function GraphView() { with unextracted sessions is exactly when it matters (extract → the graph gains nodes). The panel re-reads when background runs settle (refreshTick). */} - +
{!isEmpty && ( <> - {/* Import notes — its own container. */} -
+ {/* Import notes — its own container (36px, header band). */} +
fileInputRef.current?.click()} - className="flex h-8 items-center gap-1.5 rounded-lg px-3 text-xs text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50" + 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" > {importing ? "Importing…" : "Import notes…"}