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

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

オープン 初心者向け
  • 何か問題がありますか？
#13,016 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

@shubhook がすでに取り組んでいます。

2026年7月27日 から。

  • #13039 @shubhook による — オープン
  • #13044 @rekha0suthar による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
76/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
typescript
領域
frontend

調査の方向性

gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx と TipTapEditor.css から始め、次に ContinueInputBox.tsx またはその同等箇所にある入力ラッパーを確認します。100 文字を超える分割されていない文字列を使って Continue Composer で問題を再現し、関連する flex とエディターのスタイルを追跡します。文字列が入力領域内に収まり、送信ボタンと composer のレイアウトの整列が維持されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
36.2k
フォーク
5.5k
30日以内にマージされた PR はありません

環境構築

はじめの一歩

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

continuedev/continue のほかの issue

continuedev/continue の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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