markdown_preview: Apply few appearance tweaks for tables (#39190)

Bartosz Kaszubowski and Danilo Leal created 2 months ago

# Why

Refs:
*
https://github.com/zed-industries/zed/pull/39101#issuecomment-3350557981

# How

Apply suggested appearance changes in the comment mentioned above. I
have also retained the different background for header rows, since it
feels to me that it is something that GitHub styling lacks.

I have also attempted to shrink the table table element, to fit the
content width (so it does not span for the full width of preview), but I
have failed on those attempts. Tried to use many various GPUI
attributes, but only thing that worked was setting the exact width on
table container, also tried to reuse `max_lengths` values, but those are
counting characters, not the rendered width. I would like to explore
this a bit more, and try to follow up on those changes in a separate PR.

Release Notes:

- Improved table elements styling in Markdown Preview

# Preview

<img width="1616" height="582" alt="Screenshot 2025-09-30 at 12 04 30"
src="https://github.com/user-attachments/assets/4f1517cb-9046-4e09-a1e1-5223421efb71"
/>
<img width="1616" height="582" alt="Screenshot 2025-09-30 at 12 04 23"
src="https://github.com/user-attachments/assets/61303160-2b62-4213-80fc-ee8432cdf1fa"
/>
<img width="1616" height="582" alt="Screenshot 2025-09-30 at 12 04 15"
src="https://github.com/user-attachments/assets/059a447e-574d-4545-870a-93f1c00b3bb8"
/>
<img width="1616" height="582" alt="Screenshot 2025-09-30 at 12 04 42"
src="https://github.com/user-attachments/assets/8e7c6f9b-672f-4943-aded-1b644d2ff750"
/>
<img width="1616" height="582" alt="Screenshot 2025-09-30 at 12 04 34"
src="https://github.com/user-attachments/assets/6d31f7f3-d0ea-4987-bf8c-78f6b307a2b3"
/>

---------

Co-authored-by: Danilo Leal <[e-mail]>

Change summary

crates/markdown_preview/src/markdown_renderer.rs | 30 ++++++++++-------
1 file changed, 17 insertions(+), 13 deletions(-)

Detailed changes

crates/markdown_preview/src/markdown_renderer.rs

@@ -19,10 +19,8 @@ use std::{
 };
 use theme::{ActiveTheme, SyntaxTheme, ThemeSettings};
 use ui::{
-    ButtonCommon, Clickable, Color, FluentBuilder, IconButton, IconName, IconSize,
-    InteractiveElement, Label, LabelCommon, LabelSize, LinkPreview, Pixels, Rems,
-    StatefulInteractiveElement, StyledExt, StyledImage, ToggleState, Tooltip, VisibleOnHover,
-    h_flex, relative, tooltip_container, v_flex,
+    Clickable, FluentBuilder, LinkPreview, StatefulInteractiveElement, StyledExt, StyledImage,
+    ToggleState, Tooltip, VisibleOnHover, prelude::*, tooltip_container,
 };
 use workspace::{OpenOptions, OpenVisible, Workspace};
 
@@ -51,7 +49,8 @@ pub struct RenderContext {
     buffer_text_style: TextStyle,
     text_style: TextStyle,
     border_color: Hsla,
-    element_background_color: Hsla,
+    title_bar_background_color: Hsla,
+    panel_background_color: Hsla,
     text_color: Hsla,
     link_color: Hsla,
     window_rem_size: Pixels,
@@ -87,7 +86,8 @@ impl RenderContext {
             text_style: window.text_style(),
             syntax_theme: theme.syntax().clone(),
             border_color: theme.colors().border,
-            element_background_color: theme.colors().element_background,
+            title_bar_background_color: theme.colors().title_bar_background,
+            panel_background_color: theme.colors().panel_background,
             text_color: theme.colors().text,
             link_color: theme.colors().text_accent,
             window_rem_size: window.rem_size(),
@@ -511,28 +511,27 @@ fn render_markdown_table(parsed: &ParsedMarkdownTable, cx: &mut RenderContext) -
         &parsed.column_alignments,
         &max_column_widths,
         true,
+        0,
         cx,
     );
 
     let body: Vec<AnyElement> = parsed
         .body
         .iter()
-        .map(|row| {
+        .enumerate()
+        .map(|(index, row)| {
             render_markdown_table_row(
                 row,
                 &parsed.column_alignments,
                 &max_column_widths,
                 false,
+                index,
                 cx,
             )
         })
         .collect();
 
-    cx.with_common_p(v_flex())
-        .w_full()
-        .child(header)
-        .children(body)
-        .into_any()
+    div().child(header).children(body).into_any()
 }
 
 fn render_markdown_table_row(
@@ -540,6 +539,7 @@ fn render_markdown_table_row(
     alignments: &Vec<ParsedMarkdownTableAlignment>,
     max_column_widths: &Vec<f32>,
     is_header: bool,
+    row_index: usize,
     cx: &mut RenderContext,
 ) -> AnyElement {
     let mut items = Vec::with_capacity(parsed.children.len());
@@ -574,7 +574,7 @@ fn render_markdown_table_row(
         }
 
         if is_header {
-            cell = cell.bg(cx.element_background_color)
+            cell = cell.bg(cx.title_bar_background_color).opacity(0.6)
         }
 
         items.push(cell);
@@ -588,6 +588,10 @@ fn render_markdown_table_row(
         row = row.border_b_1();
     }
 
+    if row_index % 2 == 1 {
+        row = row.bg(cx.panel_background_color)
+    }
+
     row.children(items).into_any_element()
 }