continuedev / continuedev/continue

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

Open Beginner friendly
#13,016 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
36k
Forks
5.4k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx and TipTapEditor.css, then inspect the input wrapper in ContinueInputBox.tsx or its equivalent. Reproduce the issue in Continue Composer with a 100+ character unbroken string and trace the relevant flex and editor styles. Done means the string remains within the input area and the send button and composer layout stay aligned.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
76/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.