Fix fullscreen, fix unit tests

Author: haydenbleasel

packages/streamdown/__tests__/components.test.tsx

@@ -433,8 +433,8 @@ describe("Markdown Components", () => {
       const table = tableWrapper?.querySelector("table");
       expect(table).toBeTruthy();
       expect(table?.className).toContain("w-full");
-      expect(table?.className).toContain("border-collapse");
-      expect(table?.className).toContain("border");
+      expect(table?.className).toContain("divide-y");
+      expect(table?.className).toContain("divide-border");
     });
 
     it("should render thead with correct classes", () => {
@@ -470,7 +470,6 @@ describe("Markdown Components", () => {
       expect(tbody).toBeTruthy();
       expect(tbody?.className).toContain("divide-y");
       expect(tbody?.className).toContain("divide-border");
-      expect(tbody?.className).toContain("bg-muted/40");
     });
 
     it("should render tr with correct classes", () => {

packages/streamdown/lib/mermaid/fullscreen-button.tsx

@@ -1,5 +1,6 @@
 import type { MermaidConfig } from "mermaid";
 import { type ComponentProps, useContext, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { StreamdownContext } from "../../index";
 import { Maximize2Icon, XIcon } from "../icons";
 import { cn } from "../utils";
@@ -102,44 +103,47 @@ export const MermaidFullscreenButton = ({
         <Maximize2Icon size={14} />
       </button>
 
-      {isFullscreen ? (
-        // biome-ignore lint/a11y/useSemanticElements: "div is used as a backdrop overlay, not a button"
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm"
-          onClick={handleToggle}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") {
-              handleToggle();
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
-          <button
-            className="absolute top-4 right-4 z-10 rounded-md p-2 text-muted-foreground transition-all hover:bg-muted hover:text-foreground"
-            onClick={handleToggle}
-            title="Exit fullscreen"
-            type="button"
-          >
-            <XIcon size={20} />
-          </button>
-          {/* biome-ignore lint/a11y/noStaticElementInteractions: "div with role=presentation is used for event propagation control" */}
-          <div
-            className="flex size-full items-center justify-center p-4"
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-            role="presentation"
-          >
-            <Mermaid
-              chart={chart}
-              className="size-full [&_svg]:h-auto [&_svg]:w-auto"
-              config={config}
-              fullscreen={true}
-              showControls={showPanZoomControls}
-            />
-          </div>
-        </div>
-      ) : null}
+      {isFullscreen
+        ? createPortal(
+            // biome-ignore lint/a11y/useSemanticElements: "div is used as a backdrop overlay, not a button"
+            <div
+              className="fixed inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm"
+              onClick={handleToggle}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") {
+                  handleToggle();
+                }
+              }}
+              role="button"
+              tabIndex={0}
+            >
+              <button
+                className="absolute top-4 right-4 z-10 rounded-md p-2 text-muted-foreground transition-all hover:bg-muted hover:text-foreground"
+                onClick={handleToggle}
+                title="Exit fullscreen"
+                type="button"
+              >
+                <XIcon size={20} />
+              </button>
+              {/* biome-ignore lint/a11y/noStaticElementInteractions: "div with role=presentation is used for event propagation control" */}
+              <div
+                className="flex size-full items-center justify-center p-4"
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => e.stopPropagation()}
+                role="presentation"
+              >
+                <Mermaid
+                  chart={chart}
+                  className="size-full [&_svg]:h-auto [&_svg]:w-auto"
+                  config={config}
+                  fullscreen={true}
+                  showControls={showPanZoomControls}
+                />
+              </div>
+            </div>,
+            document.body
+          )
+        : null}
     </>
   );
 };

packages/streamdown/package.json

@@ -45,6 +45,7 @@
     "@types/hast": "^3.0.4",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/coverage-v8": "^4.0.15",
     "jsdom": "^27.3.0",
@@ -57,7 +58,8 @@
     "vitest": "^4.0.15"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "clsx": "^2.1.1",