Skip to content

Sidebar resize handle moves opposite to the pointer #214

Description

@lavaman131

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:

/** 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:

<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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions