feat(web-shared): make the trace viewer span detail panel resizable#2773
Conversation
Inline single-use constants in DraggableBorder and make comments self-contained. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 59717da The changes in this PR will be included in the next version bump. This PR includes changesets to release 16 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
No backport to This commit builds a resizable detail panel entirely within To override, re-run the Backport to stable workflow manually via |
2 participants
Summary
The span detail panel in the new trace viewer is now user-resizable: drag its left border to resize, double-click the border to reset to the default width. The width is clamped so the event list + timeline always stay usable, persists across sessions (localStorage), and survives closing/reopening the panel and switching tabs. When the viewer gets too narrow to honor both minimums, the panel compresses first and springs back to the preferred width when space returns.
Implementation
TraceDetailPanel(new): the detail aside extracted out ofNewTraceViewerContentinto its own component — content, prev/next/close header, J/K keyboard navigation, and the width model. It stays mounted (renderingnullwith no selection) so the width survives close/reopen by construction. This shrinkstrace-viewer.tsxfrom 856 to 665 lines.DraggableBorder(new): overlay drag handle straddling the panel border — pointer-capture dragging (mouse/touch/pen), rAF-throttled, hover/drag highlight, double-click reset, and WAI-ARIA window-splitter semantics (role="separator", arrow/Home/End keyboard resize with accuratearia-value*).detail-panel-width.ts(new): pure width model — stored preference with absolute bounds at the storage layer, container-relative max applied at render time — with unit tests (16 cases).useElementWidth(new): small shared ResizeObserver hook used by both the panel andSplitPane.SplitPane: now re-clamps its list/timeline split live when its container resizes (previously only clamped during drag, which would break once the outer boundary can move); dead surface removed (unusedDividerexport, never-passeddefaultStartWidthprop, unreachable headerless branch).pane-constants.ts, kept free of'use client'so the skeleton's import chain stays server-component-safe) instead of a hardcoded duplicate.EventListchange: row dividers render per-row instead of viadivide-yon the list.No public API changes —
NewTraceViewer's props are untouched and none of the new modules are exported from the package.Testing
pnpm typecheck,pnpm vitest run(132 tests, 16 new), andpnpm buildinpackages/web-sharedall pass.Changeset included (minor,
@workflow/web-shared).🤖 Generated with Claude Code