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

Bug: Composer input overflow with long unbroken string causes layout shift and send button misalignment

Abierto Apto para principiantes
  • ¿Algo no está bien?
#13,016 2 comentarios 0 reacciones 0 asignados Ver en GitHub

@shubhook ya está trabajando en esto.

Desde el 27/7/2026.

  • #13039 de @shubhook — abierto
  • #13044 de @rekha0suthar — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Comienza con gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx y TipTapEditor.css; después inspecciona el contenedor de entrada en ContinueInputBox.tsx o su equivalente. Reproduce el problema en Continue Composer con una cadena ininterrumpida de más de 100 caracteres y rastrea los estilos relevantes de flex y del editor. La tarea estará terminada cuando la cadena permanezca dentro del área de entrada y el botón de envío y el diseño del composer sigan alineados.

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

Descripción

Describe the bug

When typing or pasting a long unbroken string (no spaces, e.g., aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... or a long base64 token) in the Composer input box, the text overflows the input area instead of wrapping. This causes the flex container to expand, shifting the entire composer layout and misaligning the send button relative to the input.

To Reproduce

  1. Open Continue Composer in VS Code
  2. Type or paste a long string without spaces (e.g., 100+ a characters) into the input box
  3. Observe that the text extends beyond the input box boundary
  4. The composer panel shifts horizontally, and the send button drifts out of alignment

Expected behavior

  • Long unbroken strings should wrap inside the input box
  • The composer layout should remain stable regardless of input content
  • The send button should stay in its normal position

Screenshots / Recordings

N/A — easily reproducible with any long no-space string.

Environment info

  • Continue version: latest (observed in recent versions)
  • IDE: VS Code
  • OS: all (cross-platform CSS issue)

Root cause

The Composer uses TipTap (TipTapEditor.tsx + TipTapEditor.css) as its input component.

  1. No text wrapping fallback — The .tiptap styles in TipTapEditor.css lack overflow-wrap: break-word / word-break: break-word. By default, the browser does not break unbroken strings, so they overflow the contenteditable div.
  2. No min-width constraint on flex item — The input wrapper or its flex container lacks min-width: 0, so the flex item's default min-width: auto prevents the container from shrinking below the content width. This propagates the overflow outward, shifting the layout.

Suggested fix

In gui/src/components/mainInput/TipTapEditor/TipTapEditor.css, add to the .tiptap class:

.tiptap {
  overflow-wrap: break-word;
  word-break: break-word;
}

And on the flex container or input wrapper in ContinueInputBox.tsx (or equivalent), add min-width: 0 to the appropriate flex child to allow proper shrinking.

Additional context

This is a classic CSS flexbox overflow issue. The fix is minimal, backwards-compatible, and has no side effects on normal input behavior (spaces still wrap as before; only unbroken strings are affected).

Lenguaje dominante
TypeScript
Estrellas
36.2k
Forks
5.5k
Sin PR fusionados en 30 d

Preparar el entorno

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 continuedev/continue

Todos los issues de continuedev/continue

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.