markdown table cells do not wrap and can overflow horizontally

[suxiaoshao]

Description

Markdown table cells can overflow horizontally instead of wrapping inside the cell.

I hit this in an app that renders markdown via TextView::markdown(...). Normal paragraph text wraps correctly, but once the content is inside a markdown table cell, long Chinese/English mixed text stays on a single line and pushes the row beyond the container width.

This looks like a bug in the markdown table renderer in crates/ui/src/text/node.rs, not in app-level usage.

Environment

• GPUI: v0.2.2
• GPUI Component: v0.5.1
• Platform: macOS

Steps to Reproduce

1. Render markdown with TextView::markdown(...).
2. Include a table with one short first column and one long second column.
3. Put long natural-language text in the second column.
4. View the rendered table in a constrained-width container.

Example markdown:

| Framework | Detection Pattern |
| --- | --- |
| React | useEffect without cleanup return, addEventListener without removeEventListener, setInterval/setTimeout without cleanup, subscribe() without unsubscribe() |
| Vue | onMounted without matching onUnmounted cleanup, watch/watchEffect without stop handle, manual addEventListener inside setup without removal |

Screenshots

Expected

Table cells should wrap text within the available cell width, similar to normal paragraph rendering.

Actual

The table renderer sets a width using relative(len as f32) where len is derived from text length, and also applies .truncate() on each cell. This makes cells behave like fixed/non-wrapping content and causes horizontal overflow for long cell text.

Relevant code:

• crates/ui/src/text/node.rs
• div().w(Length::Definite(relative(len as f32)))
• .truncate()

From inspection:

• .truncate() disables wrapping by applying whitespace_nowrap
• relative(...) expects a fraction of parent width, but here it receives character-count-like values (len as f32), not a 0.0..=1.0 ratio

So the issue appears to be in gpui-component's markdown table layout logic.

[suxiaoshao]

Here is a minimal local reproduction example I used for the screenshot.

Run it with:

cargo run -p markdown_table_overflow_repro

Code:

use gpui::*;
use gpui_component::{ActiveTheme as _, Root, text::TextView, v_flex};

struct MarkdownTableOverflowRepro;

impl Render for MarkdownTableOverflowRepro {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        const MARKDOWN: &str = r#"## Markdown table overflow repro

Normal paragraph text wraps in the same constrained container.

| Framework | Detection Pattern |
| --- | --- |
| React | useEffect without cleanup return, addEventListener without removeEventListener, setInterval or setTimeout without cleanup, subscribe() without unsubscribe() |
| Vue | onMounted without matching onUnmounted cleanup, watch or watchEffect without a retained stop handle, manual addEventListener inside setup without removal |
| Angular | subscribe() without unsubscribe() or takeUntil, missing ngOnDestroy, Renderer2.listen() without storing unlisten |
"#;

        v_flex()
            .size_full()
            .bg(cx.theme().background)
            .p_6()
            .gap_3()
            .child(
                div()
                    .text_sm()
                    .text_color(cx.theme().muted_foreground)
                    .child(
                        "The paragraph above should wrap, but the table rows below overflow horizontally.",
                    ),
            )
            .child(
                div()
                    .w(px(760.))
                    .border_1()
                    .border_color(cx.theme().border)
                    .rounded(cx.theme().radius)
                    .bg(cx.theme().background)
                    .p_3()
                    .child(
                        TextView::markdown("markdown-table-overflow", MARKDOWN).selectable(true),
                    ),
            )
    }
}

fn main() {
    gpui_platform::application().run(move |cx| {
        gpui_component::init(cx);

        cx.spawn(async move |cx| {
            cx.open_window(WindowOptions::default(), |window, cx| {
                let view = cx.new(|_| MarkdownTableOverflowRepro);
                cx.new(|cx| Root::new(view, window, cx))
            })
            .expect("Failed to open window");
        })
        .detach();
    });
}

I also verified it locally with:

cargo check -p markdown_table_overflow_repro

[suxiaoshao]

I added a smaller repro to narrow down whether this is a gpui text/layout issue or a gpui-component markdown table renderer issue.

Result:

• Plain GPUI text in a fixed-width box renders Framework on one line
• TextView::markdown("Framework") in the same fixed-width box also renders on one line
• Only the markdown table header cell wraps Framework into two lines

So this does not look like a general gpui text shaping / text wrapping bug.
The issue appears to be specific to the markdown table layout/rendering path in gpui-component.

I used the local repro app and added two side-by-side controls below the table:

• plain GPUI text in a fixed-width container
• TextView::markdown with a single word in the same fixed-width container

Those both render correctly, while the table header still wraps incorrectly.

This strongly suggests the problem is in the table cell layout/width propagation, rather than in the underlying text measurement API.

Screenshot summary:

• table header cell: Framework wraps incorrectly
• plain GPUI box: Framework stays on one line
• plain markdown box: Framework stays on one line