github / github/app

Markdown table columns don't wrap text — grow to fit content instead

Đang mở
#3,081 0 bình luận 0 reaction 1 người được giao Được @dmytrostruk nhận Xem trên GitHub
Ngôn ngữ chính
Không có dữ liệu ngôn ngữ
Star
2.1k
Fork
153
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

## Summary

When a markdown table is rendered in the app (e.g., in a conversation, the editor canvas, or file preview), cells with long content (long descriptions, unbroken URLs, etc.) do not wrap their text. Instead, the column grows wider to fit the content, and if a table has multiple such columns, the whole table becomes extremely wide, requiring horizontal scrolling instead of wrapping.

## Root cause (double-check this)

In `src/components/MarkdownContent/MarkdownContent.module.css`, the `.table` class sets `width: 100%` but has no `table-layout: fixed`. Without `table-layout: fixed`, the browser sizes columns based on intrinsic content width (auto layout) before any wrapping is considered, so long unbroken tokens push columns wider rather than wrapping. The `.tableScroller` wrapper's `overflow-x: auto` then just allows horizontal scrolling instead of wrapping. The `overflow-wrap: anywhere` set on `.root` doesn't help because it never gets a chance to apply — the column has already expanded.

## Suggested fix

Add `table-layout: fixed;` to the `.table` rule, and add `white-space: normal; overflow-wrap: anywhere; word-break: break-word;` to `.tableHeader, .tableCell` so wrapping works reliably even for long unbroken strings like URLs.

## Repro steps

1. Render a markdown table with a column containing a long sentence and another column containing a long unbroken URL (no spaces/hyphens).
2. Observe that the table becomes very wide instead of wrapping the cell text onto multiple lines.

## Expected behavior

Table stays within the available width; cell text wraps onto multiple lines like a normal paragraph.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

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.