Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Sidebar resize handle moves opposite to the pointer

Cerrado
  • ¿Algo no está bien?
#214 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
392
Forks
22
Merge medio
16 h 56 min
PR fusionados (30 d)
298

Preparar el entorno

  • Incluye un Dockerfile o un archivo de Docker Compose
  • Sin plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de githubnext/chopin

Todos los issues de githubnext/chopin

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.