Sidebar resize handle moves opposite to the pointer
lavaman131 opened ·
## Summary
Dragging a sidebar's resize handle moves its edge in the opposite direction from the pointer: dragging left makes the handle behave as if it were dragged right, and vice versa. Resize handles on other sites behave normally on the same machine and input device.
The code suggests the chat panel's handle is inverted by construction, but this has not been reproduced in a browser yet. The reporter observed that the behavior seemed to depend on the mouse/scroll setup; the drag path only reads `PointerEvent.clientX`, which scroll direction settings don't affect, so that part is unconfirmed.
## Where it comes from
`apps/web/src/resizable-pane.tsx`:
```ts /** Translates an on-screen drag into the width change for the pane's edge. */ export function resizeDelta(side: PaneSide, delta: number): number { return side === "left" ? delta : -delta; } ```
The same `side` value also positions the handle (`side === "left" ? "left-0" : "right-0"`), so `side` names the edge the handle sits on.
In `apps/web/src/workspace.tsx` the chat panel is the right-hand column (`order-2`, after `main` at `order-1`), and its handle is on its left edge:
```tsx <ResizeHandle label="Resize chat" … side="left" … /> ```
For a right-hand panel resized from its left edge, moving the edge right should make the panel narrower. `resizeDelta("left", +d)` returns `+d`, so `usePaneWidth` widens the chat panel as the pointer moves right and narrows it as the pointer moves left. `keyboardPaneDelta` uses the same mapping, so `ArrowRight` on the focused handle also widens the panel.
The Projects sidebar's handle (`SidebarResizeHandle` in `apps/web/src/navigation-shell.tsx`) applies the raw `clientX` delta to a left-hand pane, which is the correct direction.
`apps/web/src/resizable-pane.test.ts` pins the current mapping (`resizeDelta("left", 16) === 16`), so it doesn't catch the inversion.
## Steps to reproduce
1. Open a document in split mode with the chat panel visible. 2. Press on the chat panel's resize handle (its left edge) and drag toward the document (left). 3. Observe the chat panel narrow instead of widen, and widen when dragging right.
## Expected behavior
The handle follows the pointer: dragging the chat panel's left edge left widens the chat panel, dragging it right narrows it. Arrow keys move the separator in the arrow's direction.
## Possible fix
Make the mapping depend on which side of the layout the pane is on (or rename `side` to the pane's side and pass `"right"` for chat), and add a test for a right-hand pane resized from its left edge, for both pointer and keyboard input.
lavaman131added label buglast month on GitHub
lavaman131assigned lavaman131last month on GitHub
lavaman131referenced this in Keep the chat resize handle under the pointer #236last month on GitHub
lavaman131referenced b2190237f8dalast month on GitHub
benjaminkittreferenced ce22483fd458last month on GitHub
shanehollomanreferenced b8721d3164d4last month on GitHub