oak-team/oak-gpui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

markdown: Improve table display (#42674)

Browse Source 
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.
This commit is contained in:
Danilo Leal
2025-11-13 19:36:16 -03:00
committed by GitHub
parent 84f24e4b62
commit e1d295a6b4
2 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/agent_ui/src/acp/thread_view.rs
-1
View File
@@ -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()),
crates/markdown/src/markdown.rs
+18 -21
View File
@@ -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();
}