resizable-panes

Provenance

• Source: .spec/spexcode/spec-dashboard/dashboard-ui/ui-primitives/resizable-panes/spec.md
• Source SHA-256: bba304a81bf9e04ac0006006249e42bcde52ee30ec272397b60f1b6049531308

resizable-panes

raw source

The session board's list shipped at a hardcoded 240px — a terminal-era rigidity. A modern app lets the user drag the pane border to fit long session titles or a wide monitor and remembers the choice.

expanded spec

One mechanism for every resizable pane, not per-pane drag code: a pane border carries a thin col-resize divider (invisible at rest; a subtle accent line appears on hover/drag, so the affordance shows exactly when reached for). Dragging it resizes the pane live; the width clamps to a per-pane min/max so no pane can crush its neighbor or vanish; release persists the width per pane (localStorage), so it survives reloads and is per-browser like the theme and language picks. While a drag is live, text selection is suspended and the resize cursor holds app-wide, so a fast drag never smears a selection across the page.

The divider also follows the familiar editor-panel reset gesture: a double-click clears that pane's stored override and restores its current product default. Reset is returned by the same hook, so consumers do not reach into localStorage or duplicate default-width knowledge.

The current pane on the mechanism is the session board's list ([[session-console]]). A future pane joins by mounting the same hook + divider, not by writing its own drag handling; the graph remains a full-width canvas and therefore mounts no divider.