sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Top-row chrome: dropdowns layer above the cost number; slight (4px) corners

Browse Source 
- Stacking: the actions row is now relative + z-20 — an open settings or
  coverage dropdown paints over the cost number below it (owner report:
  it layered ON TOP of the panel, still hoverable/clickable). The row is
  a stacking context inside the column, so its dropdowns cover the
  number and clicks land on the panel; the number resurfaces untouched
  when the panel closes (verified with elementFromPoint).
- Rectangular look (owner, 2026-09-20): the four top-row controls drop
  rounded-xl (16px theme) to rounded-sm (4px) — gear, coverage, search
  container + input, import container + button; the cost number's hover
  highlight joins the family. Dropdown panels keep their softer cards.
This commit is contained in:
amosblomqvist
2026-09-19 22:06:19 +03:00
parent 4e39f04cfa
commit 3de911aa58
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/graph-view.tsx
+12 -7
View File
@@ -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. */}
<div className="lh-no-drag absolute right-3 top-2 z-10 flex max-w-[calc(100%-5.5rem)] flex-col items-end gap-2">
<div className="flex min-w-0 items-start gap-2">
{/* 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. */}
<div className="relative z-20 flex min-w-0 items-start gap-2">
{!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. */}
<div className="w-56 min-w-0 shrink rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
<div className="w-56 min-w-0 shrink rounded-sm border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
<div className="relative">
<SearchIcon className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
<input
@@ -1171,7 +1176,7 @@ export function GraphView() {
onChange={(e) => 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"
/>
</div>
{snapshot !== null && visibleIds.size === 0 && query.trim() !== "" && (
@@ -1191,7 +1196,7 @@ export function GraphView() {
{!isEmpty && (
<>
{/* Import notes — its own container (36px, header band). */}
<div className="shrink-0 rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
<div className="shrink-0 rounded-sm border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
<input
ref={fileInputRef}
type="file"
@@ -1207,7 +1212,7 @@ export function GraphView() {
type="button"
disabled={importing}
onClick={() => 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"
>
<UploadIcon className="size-3" />
{importing ? "Importing…" : "Import notes…"}