Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Sidebar resize handle moves opposite to the pointer

已关闭
  • 哪里不对？
#214 0 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
78/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
typescript
领域
frontend

调研方向

Start with apps/web/src/resizable-pane.tsx and its resizeDelta mapping, then inspect the chat handle in apps/web/src/workspace.tsx and keyboardPaneDelta. Run apps/web/src/resizable-pane.test.ts first; done means pointer and keyboard movement make the chat separator follow the expected direction, with tests covering a right-hand pane resized from its left edge.

由索引模型根据 Issue 内容生成。

描述

bug

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.

主要语言
TypeScript
星标
392
派生
22
平均合并
17 小时 55 分钟
30 天内合并 PR
258

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

githubnext/chopin 的其他 Issue

查看 githubnext/chopin 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。