From e1d295a6b4ee0def3d155337818c6e1a5a52a3f3 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 13 Nov 2025 19:36:16 -0300
Subject: [PATCH] markdown: Improve table display (#42674)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Closes https://github.com/zed-industries/zed/issues/36330
Closes https://github.com/zed-industries/zed/issues/35460
This PR improves how we display markdown tables by relying on grids
rather than flexbox. Given this makes text inside each cell wrap, I
ended up removing the `table_overflow_x_scroll` method, as it was 1)
used only in the agent panel, and 2) arguably not the best approach as a
whole, because as soon as you need to scroll a table, you probably need
more elements to make it be really great.
One thing I'm slightly unsatisfied with, though, is the border
situation. I added a half pixel border to the cell so they all sum up to
1px, but there are cases where there's a tiny space between rows and I
don't quite know where that's coming from and how it happens. But I
think it's a reasonable improvement overall.
Release Notes:
- agent: Improved table rendering in the agent panel, ensuring cell text
wraps, not going off-screen.
---
crates/agent_ui/src/acp/thread_view.rs | 1 -
crates/markdown/src/markdown.rs | 39 ++++++++++++--------------
2 files changed, 18 insertions(+), 22 deletions(-)
diff --git a/crates/agent_ui/src/acp/thread_view.rs b/crates/agent_ui/src/acp/thread_view.rs
index 4f3bbe718d3c6265f54f3cc4a949256b81c25572..8a0b282d9b9d5c6bab492391bdabfb1c09131bed 100644
--- a/crates/agent_ui/src/acp/thread_view.rs
+++ b/crates/agent_ui/src/acp/thread_view.rs
@@ -5907,7 +5907,6 @@ fn default_markdown_style(
syntax: cx.theme().syntax().clone(),
selection_background_color: colors.element_selection_background,
code_block_overflow_x_scroll: true,
- table_overflow_x_scroll: true,
heading_level_styles: Some(HeadingLevelStyles {
h1: Some(TextStyleRefinement {
font_size: Some(rems(1.15).into()),
diff --git a/crates/markdown/src/markdown.rs b/crates/markdown/src/markdown.rs
index b74416d8483c6b3fbdcc4f89e7bff348b81be272..9a1596092ae0497fe2d45a1d756a34e81d601b7c 100644
--- a/crates/markdown/src/markdown.rs
+++ b/crates/markdown/src/markdown.rs
@@ -66,7 +66,6 @@ pub struct MarkdownStyle {
pub selection_background_color: Hsla,
pub heading: StyleRefinement,
pub heading_level_styles: Option,
- pub table_overflow_x_scroll: bool,
pub height_is_multiple_of_line_height: bool,
pub prevent_mouse_interaction: bool,
}
@@ -87,7 +86,6 @@ impl Default for MarkdownStyle {
selection_background_color: Default::default(),
heading: Default::default(),
heading_level_styles: None,
- table_overflow_x_scroll: false,
height_is_multiple_of_line_height: false,
prevent_mouse_interaction: false,
}
@@ -992,54 +990,54 @@ impl Element for MarkdownElement {
MarkdownTag::MetadataBlock(_) => {}
MarkdownTag::Table(alignments) => {
builder.table_alignments = alignments.clone();
+
builder.push_div(
div()
.id(("table", range.start))
- .flex()
+ .min_w_0()
+ .size_full()
+ .mb_2()
.border_1()
.border_color(cx.theme().colors().border)
.rounded_sm()
- .when(self.style.table_overflow_x_scroll, |mut table| {
- table.style().restrict_scroll_to_axis = Some(true);
- table.overflow_x_scroll()
- }),
+ .overflow_hidden(),
range,
markdown_end,
);
- // This inner `v_flex` is so the table rows will stack vertically without disrupting the `overflow_x_scroll`.
- builder.push_div(div().v_flex().flex_grow(), range, markdown_end);
}
MarkdownTag::TableHead => {
+ let column_count = builder.table_alignments.len();
+
builder.push_div(
div()
- .flex()
- .justify_between()
- .border_b_1()
- .border_color(cx.theme().colors().border),
+ .grid()
+ .grid_cols(column_count as u16)
+ .bg(cx.theme().colors().title_bar_background),
range,
markdown_end,
);
builder.push_text_style(TextStyleRefinement {
- font_weight: Some(FontWeight::BOLD),
+ font_weight: Some(FontWeight::SEMIBOLD),
..Default::default()
});
}
MarkdownTag::TableRow => {
+ let column_count = builder.table_alignments.len();
+
builder.push_div(
- div().h_flex().justify_between().px_1().py_0p5(),
+ div().grid().grid_cols(column_count as u16),
range,
markdown_end,
);
}
MarkdownTag::TableCell => {
- let column_count = builder.table_alignments.len();
-
builder.push_div(
div()
- .flex()
+ .min_w_0()
+ .border(px(0.5))
+ .border_color(cx.theme().colors().border)
.px_1()
- .w(relative(1. / column_count as f32))
- .truncate(),
+ .py_0p5(),
range,
markdown_end,
);
@@ -1154,7 +1152,6 @@ impl Element for MarkdownElement {
}
}
MarkdownTagEnd::Table => {
- builder.pop_div();
builder.pop_div();
builder.table_alignments.clear();
}