Danilo Leal created
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.
<img width="500" height="1248" alt="Screenshot 2025-11-13 at 7 05@2x"
src="https://github.com/user-attachments/assets/182b2235-efeb-4a61-ada2-98262967355d"
/>
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(-)
@@ -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()),
@@ -66,7 +66,6 @@ pub struct MarkdownStyle {
pub selection_background_color: Hsla,
pub heading: StyleRefinement,
pub heading_level_styles: Option<HeadingLevelStyles>,
- 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();
}