Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#13,016 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

@shubhook đang làm issue này rồi.

Từ ngày 27/7/2026.

  • #13039 của @shubhook — đang mở
  • #13044 của @rekha0suthar — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
76/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu với gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx và TipTapEditor.css, sau đó kiểm tra input wrapper trong ContinueInputBox.tsx hoặc phần tương đương. Tái hiện vấn đề trong Continue Composer bằng một chuỗi liền mạch dài hơn 100 ký tự và theo dõi các style flex và editor liên quan. Hoàn tất khi chuỗi vẫn nằm trong vùng nhập liệu và nút gửi cùng bố cục composer vẫn được căn chỉnh.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
36.2k
Fork
5.5k
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của continuedev/continue

Tất cả issue của continuedev/continue

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.