Repository navigation
feat(ui): make side detail panels resizable in Ownership and Reactivity - #42
Merged
Merged
Conversation
5 tasks done
lxsmnsyc
reviewed
Nov 2, 2026
lxsmnsyc
left a comment
lxsmnsyc
left a comment
Member
There was a problem hiding this comment.
Thanks, this is small and fits the existing panels. CI passed. One behavior issue and a few nits.
Should fix
- The edge drifts away from the pointer after hitting a limit.
ResizeHandlereports the delta since the lastpointermove, andonResizeDeltaadds it to the already clamped width. Drag 100px past the minimum, then back 50px: the panel grows 50px while the pointer is still 50px past the edge. Fix: record the start width and start X onpointerdownand setwidth = startWidth + (startX - clientX), clamped.
Nits
- The maximum is 70% of
window.innerWidth, but the panel also has the 11rem sidebar. At a 1000px window the tree gets about 120px. Clamping to the panel's own width would keep the tree usable. A window resize also does not re-clamp the saved width. - Both panels share one storage key, so resizing one resizes the other. If that is intended, a short comment would help.
- The Reactivity detail was
19rem(304px) and now defaults to 320px. role="separator"withouttabindexandaria-valuenowcannot be used from the keyboard. Arrow-key resizing would fix that.
This PR and #41 both change src/dev-toolbar/ownership/index.tsx and conflict there; whichever merges second needs a rebase.
lxsmnsyc
force-pushed
the
feat/resizable-detail-panels
branch
from
November 4, 2026 01:08
012d987 to
e932c9b
Compare
The handle now reports the offset from where the drag started, and the pane width is the start width plus that offset, clamped. Before, it added each move to the clamped width, so the edge drifted away from the pointer after passing a limit. The widest a pane gets is the panel width minus 240px for the tree or graph, and a CSS max-width keeps that when the window shrinks. Each pane saves its own width, and the Reactivity pane keeps its old 304px default. The handle is focusable, reports aria-valuenow, and moves 16px per arrow key. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
lxsmnsyc
force-pushed
the
feat/resizable-detail-panels
branch
from
November 4, 2026 01:29
e932c9b to
ce60577
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Makes the side detail panes in both the Ownership Tree (component details) and the Reactivity Graph (node details) horizontally resizable.
Changes
ResizeHandle&useResizableDetailprimitive:ResizeHandleinsrc/ui.::beforefor a generous 12px invisible grab hitbox, and::afterfor the visual indicator.opacity: 0.6), expanding to a solid 3px accent line while dragging (no glow/blur).localStorage.Panel Integrations:
<aside data-solid-ownership-detail>inOwnershipViewer.<aside data-solid-reactivity-detail>inReactivityViewer.Tests & Changeset:
use-resizable-detail.test.ts.devtools.spec.tsverifying drag resize and double-click reset.