Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Sidebar resize handle moves opposite to the pointer

クローズ
  • 何か問題がありますか？
#214 コメント 0 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
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
平均マージ
1日 7分
マージ済み PR（30日）
203

環境構築

  • Dockerfile または Docker Compose ファイルあり
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

githubnext/chopin のほかの issue

githubnext/chopin の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。