desktop: code blocks hide horizontal scrollbars and cannot wrap long lines

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

Maintainer thường phản hồi trong vòng 1 ngày

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

Từ ngày 1/11/2026.

  • #61083 của @wheresvic — đ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
70/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu với packages/session-ui/src/components/markdown.css, nơi issue chỉ ra các kiểu ẩn thanh cuộn của khối pre. Kiểm tra cách các khối mã có nội dung tràn được định dạng và liệu component hiện có hỗ trợ tùy chọn xuống dòng hay không. Công việc hoàn tất khi có thể xem các dòng dài bằng thanh cuộn ngang hiển thị hoặc chúng được xuống dòng, trên cả giao diện desktop và web; kiểm tra các kiểu và bài kiểm thử liên quan nếu có.

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

Mô tả

Description

Long single-line code in a fenced block is clipped at the viewport edge. The block scrolls horizontally, but the scrollbar is hidden by CSS:

pre {
  overflow: auto;
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

(packages/session-ui/src/components/markdown.css)

On Windows there is no visible affordance. The only ways to reach the rest of the line are Shift+wheel or selecting text and dragging. There is also no wrap option. A code block taller than the viewport loses its copy button while scrolling too (tracked separately in #53519).

This was reported in #49535, but that issue was closed as a v1 issue, not fixed.

Plugins

env-guard.ts, headroom-compress.ts, memory-inject.ts, modelscope-imagegen.ts (none related)

OpenCode version

2.2.1 desktop (bundled CLI 2.2.1), channel latest

Steps to reproduce
  1. Ask the assistant to output a fenced code block with a very long single line (e.g. 2000+ characters).
  2. Look at the right edge of the code block.
  3. No horizontal scrollbar appears; the overflow is only reachable with Shift+wheel or by selecting text and dragging.
Screenshot

No screenshot attached.

Operating System

Windows 11 Pro 10.0.26300 x64

Terminal

Desktop app

Expected Behavior
  • Show a horizontal scrollbar when the block overflows (always, or on hover/focus), and/or
  • Add a "wrap long lines" toggle for code blocks.

The same shared styles affect the web UI, so this is not desktop-only.

Ngôn ngữ chính
TypeScript
Star
224k
Fork
30k
Merge trung bình
6 giờ 48 phút
Pull request đã merge (30 ngày)
490

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 anomalyco/opencode

Tất cả issue của anomalyco/opencode

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.