fix(streamdown): improve mermaid diagram sizing and responsiveness

.changeset/mermaid-diagram-sizing.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+Improve Mermaid diagram sizing so SVGs scale to fill the container. Add `w-full`, `[&_svg]:w-full`, `[&_svg]:h-auto`, and `[&_svg]:max-w-full` to the chart wrapper for responsive scaling. Increase default container min-height from `min-h-28` to `min-h-48` for better visibility.

packages/streamdown/__tests__/mermaid-component.test.tsx

@@ -181,6 +181,35 @@ describe("Mermaid Component", () => {
     });
   });
 
+  it("should apply responsive sizing classes to chart container", async () => {
+    const { container } = renderWithContext(<Mermaid chart={simpleChart} />);
+
+    await waitFor(() => {
+      const chartContainer = container.querySelector(
+        '[aria-label="Mermaid chart"]'
+      );
+      expect(chartContainer).toBeTruthy();
+      expect(chartContainer?.className).toContain("w-full");
+      expect(chartContainer?.className).toContain("min-w-0");
+      expect(chartContainer?.className).toContain("items-start");
+    });
+  });
+
+  it("should apply fullscreen alignment to chart container", async () => {
+    const { container } = renderWithContext(
+      <Mermaid chart={simpleChart} fullscreen={true} />
+    );
+
+    await waitFor(() => {
+      const chartContainer = container.querySelector(
+        '[aria-label="Mermaid chart"]'
+      );
+      expect(chartContainer).toBeTruthy();
+      expect(chartContainer?.className).toContain("items-center");
+      expect(chartContainer?.className).toContain("size-full");
+    });
+  });
+
   it("should pass config to mermaid getMermaid", async () => {
     const mockPlugin = createMockMermaidPlugin();
 

packages/streamdown/lib/mermaid/index.tsx

@@ -179,8 +179,9 @@ export const Mermaid = ({
         <div
           aria-label="Mermaid chart"
           className={cn(
-            "flex justify-center",
-            fullscreen ? "size-full items-center" : null
+            "flex w-full min-w-0 justify-center",
+            fullscreen ? "size-full items-center" : "items-start",
+            "[&_svg]:max-w-full [&_svg]:h-auto [&_svg]:w-full"
           )}
           // biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for Mermaid"
           dangerouslySetInnerHTML={{ __html: displaySvg }}

packages/streamdown/lib/mermaid/pan-zoom.tsx

@@ -153,7 +153,7 @@ export const PanZoom = ({
     <div
       className={cn(
         "relative flex flex-col",
-        fullscreen ? "h-full w-full" : "min-h-28 w-full",
+        fullscreen ? "h-full w-full" : "min-h-48 w-full",
         className
       )}
       ref={containerRef}