[jbspeakr]

Requested by Jan · project thread

What this changes

Layout and whitespace

• The rail of toggles moves from beside the drawing into a bar above it (relations, publishing bodies, view and maturity side by side, the count and Reset under a rule). The drawing now gets the full page width. Before, at 1440 px it rendered at 73% of its size, so the 13px node labels showed at about 9.5px. Now it renders at 99% (94% at 1280 px).
• Documents connected by dependency relations ("families") are laid out by ELK one family at a time. They are then packed in rows under the largest family and kept on its columns (packComponents in src/lib/graph.ts). Standalone documents and small families (WIMSE, EUDI, SD-JWT) no longer stretch the first column down the page. The empty right-hand half of the old drawing is filled, and the drawing is 1841 units tall instead of 2151. The gap between columns is 56 instead of 72.
• The hovered or focused node's card now floats beside that node, not at the bottom of the rail.

Hover flicker

• Cause: every mouseleave cleared the highlight at once. Moving from one node to the next crossed a gap, so the whole map flashed back to full strength and then dimmed again. The nodes also changed opacity with no transition. Below 60rem the card's changing height moved the drawing under the pointer.
• Fix: leaving a node now clears the highlight after a 160 ms grace period. Entering another node within that time moves the highlight straight over. Nodes fade with a 120 ms opacity transition (0 ms under reduced motion). The card is absolutely positioned and has pointer-events: none, so it cannot steal the hover or shift the layout. This is listed in the motion catalogue as M19, and the accessibility statement is updated.

Intro animation

• The spine's draw-in on load is removed from the map. It only moved one or two lines of a large drawing. The spine is still drawn in full colour and a little heavier, so the caption's "bold teal line" still holds. M4 now covers the decorative plate only, and docs/design.md and /accessibility/ are amended.

Tests

• The M4 e2e tests are replaced: one checks that the spine is drawn complete with no animation on #map. The other checks that moving the pointer from one node to a neighbour never leaves the map without a highlight, that the card takes no pointer events, and that leaving the map clears everything.
• The unit test for the column count now allows small families to pack beside the main one.

Before/after screenshots (desktop light and dark, hover, 900 px) are in the project files under review/map-polish/.

Code checklist

• pnpm check passes.
• Pages still read fully without JavaScript. The filters still work through :has(), and the card was already a JavaScript-only enhancement.
• Both themes checked; screenshots updated only for intended changes. The standards-* baselines need a refresh through the refresh-screenshots label. Locally, every other test in standards.spec.ts passes (axe included). Only the screenshot comparisons fail, because the local Chromium differs from the one CI pins.

---

Generated by Claude Code

[jbspeakr]

Closing this PR because #76 replaced most of it: small families are packed beside the main one, the hover has a grace period, and the map no longer animates on load. The two parts #76 didn't cover, the toggle bar above a full-width drawing and the hover card beside its node, are rebuilt on main in #80.

---

Generated by Claude Code