Fix squashed Mermaid diagrams in markdown preview

crates/markdown/src/mermaid.rs

@@ -322,6 +322,8 @@ pub(crate) fn render_mermaid_diagram(
     let cached = mermaid_state.cache.get(&parsed.contents);
     let render_result = cached.and_then(|cached| cached.render_image.get());
     let show_interactive = copy_button_visibility != CopyButtonVisibility::Hidden;
+    // Preview keeps diagrams at natural size + scroll instead of crushing them via max_w_full (#61051).
+    let allow_overflow_x = style.code_block_overflow_x_scroll;
 
     let code = parsed.contents.contents.clone();
 
@@ -333,16 +335,7 @@ pub(crate) fn render_mermaid_diagram(
             let body = if showing_code {
                 render_mermaid_code_view(&parsed.contents.contents)
             } else {
-                div()
-                    .w_full()
-                    .child(
-                        img(ImageSource::Render(render_image.clone()))
-                            .max_w_full()
-                            .with_fallback(|| {
-                                Label::new("Failed to Load Mermaid Diagram").into_any_element()
-                            }),
-                    )
-                    .into_any_element()
+                render_mermaid_image(render_image.clone(), allow_overflow_x, source_offset)
             };
 
             container
@@ -382,16 +375,11 @@ pub(crate) fn render_mermaid_diagram(
                 container
                     .child(
                         div()
-                            .w_full()
-                            .child(
-                                img(ImageSource::Render(fallback.clone()))
-                                    .max_w_full()
-                                    .with_fallback(|| {
-                                        div()
-                                            .child(Label::new("Failed to load mermaid diagram"))
-                                            .into_any_element()
-                                    }),
-                            )
+                            .child(render_mermaid_image(
+                                fallback.clone(),
+                                allow_overflow_x,
+                                source_offset,
+                            ))
                             .with_animation(
                                 "mermaid-fallback-pulse",
                                 Animation::new(Duration::from_secs(2))
@@ -439,6 +427,30 @@ pub(crate) fn render_mermaid_diagram(
     }
 }
 
+/// Renders a mermaid diagram image, scrolling at intrinsic size in preview or fit-to-pane elsewhere.
+fn render_mermaid_image(
+    render_image: Arc<RenderImage>,
+    allow_overflow_x: bool,
+    source_offset: usize,
+) -> AnyElement {
+    let image = img(ImageSource::Render(render_image))
+        .with_fallback(|| Label::new("Failed to Load Mermaid Diagram").into_any_element());
+
+    if allow_overflow_x {
+        div()
+            .id(("mermaid-scroll", source_offset))
+            .w_full()
+            .map(|mut container| {
+                container.style().restrict_scroll_to_axis = Some(true);
+                container.overflow_x_scroll()
+            })
+            .child(image)
+            .into_any_element()
+    } else {
+        div().w_full().child(image.max_w_full()).into_any_element()
+    }
+}
+
 fn render_mermaid_tab_header(
     source_offset: usize,
     showing_code: bool,