Skip to content

The docked panel and the table say where you are - #545

Closed
WaylandYang wants to merge 5 commits into
devfrom
fix/the-panel-sits-where-the-chrome-does
Closed

The docked panel and the table say where you are#545
WaylandYang wants to merge 5 commits into
devfrom
fix/the-panel-sits-where-the-chrome-does

Conversation

@WaylandYang

@WaylandYang WaylandYang commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Four things on the ontology page, all about knowing what you are looking at.

The panel started 56px below everything else

It was pinned at top-14, inherited from the graph page where a taller row of
chrome sits above it. On the ontology page the legend row ends at 44px, so the
panel left a band of bare canvas above it and read as misaligned. It now starts at
top-3, the same line the legend starts on.

That introduces a collision the old offset was hiding: the legend row spans
left-3 right-3, so on a narrow window its chips would wrap underneath the panel.
When a panel is open the row's right edge now stops short of it
(.u-canvas-chrome-docked, 24.75rem = the panel's w-96 plus its right-3), and
the chips wrap early instead of sliding under. A semantic class rather than an
arbitrary Tailwind value, because the number tracks the panel's width.

The graph page's panel keeps its top-14: that page really does have a taller row
above it.

It was too see-through to read

--u-surface-strong goes 0.68 → 0.86.

The number has been tuned before: 0.72 read like a sheet of paper stuck on the
canvas, 0.62 was too light, and it settled at 0.68. But that was chosen before
the backdrop was desaturated. With saturate(0.3) what comes through is grey
rather than coloured, so the surface no longer looks like paper when it carries
more body — and over the ontology diagram, which is dense white edges, 0.68 still
let lines run through the text. This layer exists to be read. "You can faintly see
what it covers" is the blur's job, not the alpha's.

Both pages' panels are glass-strong, so this one number keeps them equal by
construction rather than by two people remembering to match. The top bar, nav, tool
towers, time island and menus gain the same body — that is the point of it being
one token.

A table row did not say it was the one you picked

Clicking a row opens the panel on the right, but the row itself kept no mark. Two
pages into 916 classes you no longer know which one you are reading about.

Tr gains active, drawn with u-nav-active — the same mark the rail's rows use,
and deliberately not the hover surface: it is twice the alpha (0.09 against 0.045)
plus white text, so "the one I picked" and "the one I am pointing at" stay
distinguishable. If they looked alike, pointing anywhere would put two identical
rows on screen.

The tables take a selection narrowed to just classes and properties. The page's own
selection type also carries import / rules / schema, and none of those correspond to
a row.

The unscoped-properties popover was the odd one out

It still had the old anatomy: a pill inside the panel with an × on it. Every other
popover in the product — the knowledge-base switcher, the alerts panel, the user
menu, the graph page's class legend — opens with the trigger itself as its first
row, chevron flipped, and closes when you click that row. No floating ×: whatever it
grew out of is what it folds back into. Now it matches.

Checked

  • pnpm build clean; style guard 46/46.
  • Panel top 12px from the canvas top, was 56.
  • Both pages' panels read rgba(10, 10, 10, 0.86), identical.
  • With a panel open the legend row's right inset is 396px; without one, 12px.
  • Clicking a table row leaves exactly one row at rgba(255, 255, 255, 0.09) with
    aria-current="true".
  • Popover: no ×, chevron present, clicking the header closes it.

Two of those needed a forced repaint first — the preview pane does not run rAF, so
the popover sits frozen part-way through its opening transform and measures smaller
than it is. It looked like a bug until I made it paint.

Stacked

On #540, which this needs for the .u-skel-line neighbourhood in styles.css and
for the tables it edits.

🤖 Generated with Claude Code

@WaylandYang WaylandYang changed the title The docked panel starts where the chrome starts The docked panel and the table say where you are Sep 9, 2026
@WaylandYang
WaylandYang force-pushed the fix/the-tables-paginate branch from 058d56c to 914ddea Compare September 9, 2026 13:41
Base automatically changed from fix/the-tables-paginate to dev September 9, 2026 13:48
WaylandYang and others added 5 commits September 9, 2026 21:54
…vering

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>
@WaylandYang
WaylandYang force-pushed the fix/the-panel-sits-where-the-chrome-does branch from 497d485 to d2577a9 Compare September 9, 2026 13:56
@WaylandYang

Copy link
Copy Markdown
Contributor Author

内容已在 dev 上(b26b5716,squash 合并),四处标志逐一核过:u-canvas-chrome-docked、--u-surface-strong 0.86、table.tsx 的 u-nav-active、Graph.tsx 的 pl-6 pr-4 pt-3。GitHub 没把这个 PR 自动关掉,手动关。

@WaylandYang WaylandYang closed this Sep 9, 2026
pull Bot pushed a commit to nagyist/deeplethe-utopia that referenced this pull request Sep 9, 2026
* The docked panel starts where the chrome starts, and reads without hovering

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>

* The panel carries enough body to read over a dense graph

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>

* A table row says when it is the one you picked

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>

* The panel's tabs line up with the name above them

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>

* The direction arrows line up in one column again

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>

---------

Signed-off-by: WaylandYang <wayland0916@gmail.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant