continuedev / continuedev/continue
Bug: Composer input overflow with long unbroken string causes layout shift and send button misalignment
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
- Open Continue Composer in VS Code
- Type or paste a long string without spaces (e.g., 100+
acharacters) into the input box - Observe that the text extends beyond the input box boundary
- 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.
- No text wrapping fallback — The
.tiptapstyles inTipTapEditor.csslackoverflow-wrap: break-word/word-break: break-word. By default, the browser does not break unbroken strings, so they overflow the contenteditable div. - No min-width constraint on flex item — The input wrapper or its flex container lacks
min-width: 0, so the flex item's defaultmin-width: autoprevents 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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